Jump Start with Vue 3

Beginner

48 Lessons

16h

Certificate of Completion

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

1 Project

48 Playgrounds

6 Quizzes

This course includes

1 Project

48 Playgrounds

6 Quizzes

Course Overview

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, templ...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

What You'll Learn

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

Course Content

Vue 3 Overview

Introduction to the Course

Vue.js: The Basics

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

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

The setup() Function Dealing with Data: ref() and reactive()Computed and Watched Values Lifecycle Hooks Quiz: The Composition API Challenge: The Composition API

Routing

Routes Navigation Navigation Guards Example: Authorized Routes Quiz: Routing Challenge: Create a Minimal Blog Engine Using Vue Router

State Management

6 Lessons

Nuxt.js

6 Lessons

Staff Navigator App

Project

Wrapping Up

1 Lesson

Appendix

8 Lessons

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

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

Instant 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.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

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!

Looking for something else?

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath