In this introductory lesson we learn what Vue is, the benefits of using Vue, its learning difficulty and the prerequisites for this course.

Lessons in this course

If you’re new to Vue, or Javascript frameworks in general, start from the beginning.

First Steps

The Vue APIDevelopment Environment SetupYour First Vue AppThe Vue Application Instance

Basics

Data & One-way DatabindingMethodsEvent HandlingTwo-way DatabindingComputed PropertiesWatchersConditional RenderingIteration Rendering

Components

Component BasicsComponent PropsProvide & InjectComponent EventsComponent StylingComponent SlotsDynamic & Built-in ComponentsComponent Teleport

Lifecycle

Lifecycle Hooks

DOM Access

Template Refs

HTTP & Local Data Storage

HTTP & FetchHTTP & AxiosLocal JSON Storage

Pages & Routing

Router Setup & BasicsRoute Parameters, Nesting & ScrollingRoute Guards

State Management

VuexVuex Modules

Global

Mixins

Testing

Overview

Unit Testing

Unit Testing with JestUnit Testing ComponentsUnit Testing VuexUnit Testing Routing

Snapshot Testing

Snapshot Testing with Jest

End-To-End (E2E) Testing

End-To-End Testing with Cypress

Animation

Animations & TransitionsAnimating Components, Elements & RoutesJavascript Transition HooksAnimation with GreenSock (GSAP)

Firebase

Firebase Firestore SetupFirestore BasicsFirestore Authentication & Security

Composition API

Composition API BasicsComposition API Async Lazy Loading & SuspenseComposition API RoutingComposition API VuexComposables (Custom Hooks)

TypeScript

TypeScript Setup & BasicsRefs, Complex types & Interfaces

Script Setup

Script Setup

Global API

Global API Setup & Basics

CSS Frameworks

Tailwind Setup & Basics

Vite

Vite Setup

Build

Build a Vue Application

Lesson Video

If you prefer to learn visually, you can watch this lesson in video format.

What is Vue

Vue is a lightweight, versatile Javascript framework used to build user interfaces (UIs) and single-page applications (SPAs).

Its architecture is designed to be incrementally adaptable, integrate easily into existing projects and gradually introduce additional markup to your HTML.

With high decoupling, additional features are only added if we need them through a plugin system.

History of Vue

Vue was created by Evan You , who took the best features of Angular and React to build the lightweight framework we have today.

The first version released in February 2014 and is now maintained by him and an active core team with members coming from various componanies such as Netlify and Netguru.

This course covers the latest major version, Vue 3.

Who uses Vue

Vue is used by more than 3,000 companies, ranging from small to international giants like Xiaomi, Alibaba, and Gitlab.

A full list can be seen on StackShare .

Is Vue hard to learn

One of the reasons Vue is so popular is because it’s easy to learn. Out of the major frameworks, Vue is one of the easiest to pick up and has the best documentation .

That said, you will need to know at least the basics of the underlying technologies (HTML, CSS and Javascript).

If you’re coming from another framework like Angular or React, it shouldn’t take much longer than a few weeks to become proficient. If you’re new to these types of frameworks, it will take a couple of months or more to become proficient.

TIP Mozilla has free HTML, CSS & Javascript tutorials and we also offer our own introductory Javascript course .

Prerequisites

Before we proceed, please note that we make the following assumptions:

• You know how to install software on whichever operating system you use.
• You can create and navigate directories and files on your computer.
• You know at least the basics of HTML, CSS and Javascript.
• We cover the command line where needed in this course, but it’s helpful to know the basics of it as well.

This tutorial course is primarily aimed at beginners with no knowledge of Vue or Javascript frameworks. But, more experienced students coming from other frameworks like Angular, React or Svelte may also find it helpful.