Vue.js 3 for Beginners: Build Modern Web Applications

Vue.js 3 for Beginners: Build Modern Web Applications

Instructor: Packt - Course Instructors

Access provided by ExxonMobil

14 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

2 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

14 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

2 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

Master the fundamentals of Vue.js and its core concepts
Integrate essential tools like Pinia, Vue Router, and testing frameworks
Build scalable and maintainable applications using component-based architecture

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

14 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

There are 14 modules in this course

Vue.js 3 for Beginners offers a practical, step-by-step approach to mastering the fundamentals of Vue.js. This course covers key concepts, tools, and best practices to help learners develop modern, scalable web applications. It focuses on component-based architecture, Vue Router, Pinia, and testing frameworks, making it an essential resource for aspiring web developers.

As you progress through the course, you’ll apply your learning by building a fully functional web application. With hands-on examples and clear explanations, this course will guide you through the key features of Vue.js, ensuring you gain valuable skills for real-world application development. What sets this course apart is its practical, hands-on approach to teaching Vue.js, with a focus on building applications that are both scalable and maintainable. By the end of the course, you’ll have the confidence to apply your Vue.js knowledge to any web development project. This course is perfect for aspiring web developers, students, or hobbyists with a basic understanding of HTML, CSS, and JavaScript who are eager to learn Vue.js and apply it to create web applications.

In this section, we will explore how the course is structured and introduce the Companion app.

What's included

1 video4 readings1 assignment

In this section, we explore Vue.js reactivity, lifecycle hooks, and component structure to build a foundational understanding for efficient application development.

What's included

1 video4 readings1 assignment

In this section, we build a Vue project, create components with props, and use Refs and Reactive for managing reactive data in dynamic web applications.

What's included

1 video5 readings1 assignment

In this section, we explore Vue.js built-in directives like v-text, v-html, v-if, v-show, and v-for to enhance dynamic content rendering and component control, improving template efficiency and user experience.

What's included

1 video4 readings1 assignment

1 videoTotal 1 minute

Utilizing Vue’s Built-In Directives for Effortless Development - Overview Video1 minute

4 readingsTotal 70 minutes

Introduction20 minutes
Modifying the Inner HTML of an Element with v-html20 minutes
Keeping the DOM Clean and Performant with v-if20 minutes
Simplifying Your Template with v-for10 minutes

1 assignmentTotal 10 minutes

Mastering Vue Directives for Dynamic UI Development10 minutes

In this section, we explore methods and computed properties in Vue.js to improve component logic abstraction, reactivity, and performance. Key concepts include distinguishing their use cases for maintainable and efficient code.

What's included

1 video4 readings1 assignment

In this section, we explore Vue.js component communication through props with validators and events for data flow. Key concepts include handling native and custom events for reusable, scalable app development.

What's included

1 video4 readings1 assignment

In this section, we explore loading API data using Vue.js lifecycle methods, implementing watch functions for component changes, and using <Suspense> for asynchronous rendering to enhance user experience and application performance.

What's included

1 video5 readings1 assignment

1 videoTotal 1 minute

Handling API Data and Managing Async Components with Vue.js - Overview Video1 minute

5 readingsTotal 80 minutes

Introduction20 minutes
Fixing the SocialPost.vue Properties Misalignment10 minutes
Load Comments on Demand20 minutes
Watching for Changes in Components Using Watch10 minutes
Handling Asynchronous Components with <Suspense>20 minutes

1 assignmentTotal 10 minutes

Mastering Asynchronous Components and API Integration in Vue.js10 minutes

In this section, we explore unit testing with Vitest and E2E testing with Cypress, focusing on practical implementation and techniques like mocking and spying to ensure software quality.

What's included

1 video6 readings1 assignment

1 videoTotal 1 minute

Testing Your App with Vitest and Cypress - Overview Video1 minute

6 readingsTotal 80 minutes

Introduction10 minutes
Unit Testing with Vitest30 minutes
E2E Tests with Cypress10 minutes
Learning the E2E Tests' File Format and File Location10 minutes
Writing Your First E2E Test10 minutes
Introducing Advanced Testing Techniques10 minutes

1 assignmentTotal 10 minutes

Testing Fundamentals and Best Practices10 minutes

In this section, we explore advanced Vue.js techniques including slots, Template Refs, and lifecycle hooks to build flexible, maintainable components for complex applications.

What's included

1 video5 readings1 assignment

1 videoTotal 1 minute

Introduction to Advanced Vue.js Techniques – Slots, Lifecycle, and Template Refs - Overview Video1 minute

5 readingsTotal 80 minutes

Introduction20 minutes
Provide Multiple Slots with Named Slots10 minutes
Accessing Components Elements with Template Refs10 minutes
Access from Native Validation30 minutes
Save and Read the User Preference in LocalStorage10 minutes

1 assignmentTotal 10 minutes

Vue.js Advanced Concepts Review10 minutes

In this section, we explore vue-router for managing navigation in Vue.js SPAs. Key concepts include defining routes, dynamic matching, nested structures, and using redirects for efficient user experiences.

What's included

1 video5 readings1 assignment

1 videoTotal 1 minute

Handling Routing with Vue Router - Overview Video1 minute

5 readingsTotal 100 minutes

Introduction20 minutes
Creating Our First View30 minutes
Dynamic Route Matching10 minutes
Creating a User Profile Route10 minutes
Reading Route Parameters in a Route Component30 minutes

1 assignmentTotal 10 minutes

Mastering Vue Router Navigation and Configuration10 minutes

In this section, we explore managing application state with Pinia, a core Vue.js package. We discuss when to use state management, design stores, and implement practical features for scalability and maintainability.

What's included

1 video5 readings1 assignment

1 videoTotal 1 minute

Managing Your Application’s State with Pinia - Overview Video1 minute

5 readingsTotal 90 minutes

Introduction10 minutes
Learning About the Structure of a Pinia Store10 minutes
Centralized Sidebar State Management with Pinia10 minutes
Creating Our First Store30 minutes
Introducing the Notion of Getters30 minutes

1 assignmentTotal 10 minutes

Mastering State Management with Pinia10 minutes

In this section, we cover client-side form validation using VeeValidate and v-model for input binding.

What's included

1 video5 readings1 assignment

1 videoTotal 1 minute

Achieving Client-Side Validation with VeeValidate - Overview Video1 minute

5 readingsTotal 60 minutes

Introduction10 minutes
Setting Your Form to Be Autocompleted20 minutes
Controlling Your Form Using VeeValidate10 minutes
Defining Your Form Validation with VeeValidate10 minutes
Using VeeValidate Rules10 minutes

1 assignmentTotal 10 minutes

Form Validation and User Experience Fundamentals10 minutes

In this section, we explore Vue Devtools for debugging and optimizing Vue.js applications. Key concepts include component analysis, reactive data inspection, and performance insights via Timeline and plugins.

What's included

1 video4 readings1 assignment

In this section, we explore advanced Vue.js resources, core features, and community engagement strategies to enhance skills and support ongoing development.