HomeCoursesJump Start with Vue 3

4.4

Beginner

16h

Updated 2 months ago

Jump Start with Vue 3

Gain insights into Vue 3’s enhanced reactivity and Composition API. Explore fundamental concepts, components, routing, and TypeScript integration to craft scalable, maintainable web applications.

Join 2.7 million developers at

Overview

Content

Reviews

Vue 3 brings forth an improved reactivity system, introduces the Composition API for organizing component logic in a modular fashion, enhances performance with a fresh virtual DOM and offers enhanced TypeScript integration. These enhancements position Vue 3 as an appealing option for constructing contemporary, scalable, and easily maintainable web applications. In this course, you’ll cover the fundamental concepts of Vue 3. You’ll start with learning the fundamentals of Vue.js, such as Vue instance, template syntax, interpolations, methods, computed properties and directives. Next, you’ll learn how to use the Vue components, custom components, component options, component lifecycle, prop validation, and named and scoped slots. You’ll also learn how to use routes, navigation and navigation guards in Vue. After taking this course, you’ll have a solid understanding of Vue and you’ll be able to create more scalable, maintainable, and testable Vue-based applications that can handle complex states and data.

Vue 3 brings forth an improved reactivity system, introduces the Composition API for organizing component logic in a modular fas...Show More

WHAT YOU'LL LEARN

An understanding of Vue instance, template syntax, interpolations, methods, computed properties, and directives

Proficiency in using Vue components, custom components, component options, and component lifecycle

Working knowledge of routes, navigation, and navigation guards in Vue

Proficiency in Vuex state management: state, getters, mutations, and actions

Hands-on experience with Nuxt.js like Nuxt component options, assets, store, middleware, and plugins

An understanding of Vue instance, template syntax, interpolations, methods, computed properties, and directives

Content

48 Lessons1 Project6 Quizzes

Vue 3 Overview

1 Lessons

Get familiar with Vue.js fundamentals, its component-based architecture, and the advancements in Vue 3.

Introduction to the Course

Vue.js: The Basics

6 Lessons

Unpack the core of Vue 3's fundamentals, templates, directives, methods, and a simple to-do app.

Vue 3 Fundamentals: Setup, Instances, and Reactive Data

Templates and Dynamic Interpolations

Template Syntax: Directives

Methods and Computed Properties

Quiz: Vue Basics

Challenge: Create a Simple To-Do List App

Components

8 Lessons

Work your way through Vue 3 components, lifecycle methods, props, slots, and event handling.

General and Custom Components

Component Options

Component Lifecycle Methods

Props and Default Properties

Communication with the Parent Component

Named and Scoped Slots

Quiz: Components

Challenge: Creating a Reusable Universal List Component

The Composition API

6 Lessons

Enhance your skills in mastering Vue 3's Composition API with practical state management and reactivity.

The setup() Function

Dealing with Data: ref() and reactive()

Computed and Watched Values

Lifecycle Hooks

Quiz: The Composition API

Challenge: The Composition API

Routing

6 Lessons

Take a closer look at routing enhancements in Vue, including dynamic routes, navigation, and navigation guards.

Routes

Navigation

Navigation Guards

Example: Authorized Routes

Quiz: Routing

Challenge: Create a Minimal Blog Engine Using Vue Router

State Management

6 Lessons

Follow the process of managing state in Vue applications using Vuex for consistency and efficiency.

Introduction to State Management

States and Getters in Vuex

Mutations and Actions in Vuex

Example: The Employee Directory

Quiz: State Management

Challenge: Create a Minimal Blog Engine Using Vuex

Nuxt.js

6 Lessons

Master Nuxt.js for efficient server-side rendering, routing, and blog application development.

Introduction to Nuxt.js

Getting Started with Nuxt

Assets, Store, Middleware, and Plugins

Nuxt Component Options

Quiz: Nuxt.js

Challenge: Recreate a Blog Engine Using Nuxt

Staff Navigator App

Project

Wrapping Up

1 Lessons

Get familiar with Vue 3 essentials and start your first real project confidently.

Concluding Remarks

Appendix

8 Lessons

Walk through installation and configuration processes in Vue, Nuxt, Vuex, and Vue Router.

Vue CLI and Installation

Installation of Nuxt

Installing Vuex

Installing Vue Router

Build Tooling

npm Scripts and Plugins

Browser Devtools

Building for Production

Authentication With Vue.js Using Auth0

Project

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

SitePoint

Developed by MAANG Engineers

Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Course

Hands-on Vue.js: Build a fully functional SPA

Gain insights into developing intermediate-level SPAs with Vue.js. Learn about directives, renderers, user input handlers and components. Delve into creating a functional SPA with backend interaction.

8 h 30 m

beginner

Course

Advanced VueJS: Build Better Applications Efficiently

Gain insights into advanced VueJS features like lifecycle hooks, event handling, and custom plugins while building complex applications with Vuex. Delve into internationalization and reusable code libraries.

17 h

intermediate

Course

Testing Vue.js Components with Jest

Gain insights into testing Vue.js applications using Jest. Delve into creating unit tests and build intricate tests for Vue components to ensure your app functions flawlessly.

7 h

advanced

Course

JavaScript in Practice: Getting Started

Delve into practical JavaScript skills, from basic concepts to integration with HTML/CSS, and discover its history and evolution in software development through hands-on exercises.

6 h

beginner

Course

JavaScript Promises

Gain insights into JavaScript Promises to handle asynchronous events, chain multiple promises, utilize built-in methods, and master async functions with await expressions for efficient event handling.

12 h

intermediate

Course

Vue - The Road to Enterprise

Gain insights into advanced practices for Vue. Discover migration techniques to Vue 3, project configuration, API layer creation, performance optimization, security, and testing best practices.

40 h

intermediate

Course

Hands-on Vue.js: Build a fully functional SPA

beginner

8 hour 30 min

Course

Advanced VueJS: Build Better Applications Efficiently

intermediate

17 hour

Course

Testing Vue.js Components with Jest