Home / Tutorials / Vue / Introduction

Vue.js 3 for Beginnners

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 API Development Environment Setup Your First Vue App The Vue Application Instance
Basics
Data & One-way Databinding Methods Event Handling Two-way Databinding Computed Properties Watchers Conditional Rendering Iteration Rendering
Components
Component Basics Component Props Provide & Inject Component Events Component Styling Component Slots Dynamic & Built-in Components Component Teleport
Lifecycle
Lifecycle Hooks
DOM Access
Template Refs
HTTP & Local Data Storage
HTTP & Fetch HTTP & Axios Local JSON Storage
Pages & Routing
Router Setup & Basics Route Parameters, Nesting & Scrolling Route Guards
State Management
Vuex Vuex Modules
Global
Mixins
Testing
Overview
Unit Testing
Unit Testing with Jest Unit Testing Components Unit Testing Vuex Unit Testing Routing
Snapshot Testing
Snapshot Testing with Jest
End-To-End (E2E) Testing
End-To-End Testing with Cypress
Animation
Animations & Transitions Animating Components, Elements & Routes Javascript Transition Hooks Animation with GreenSock (GSAP)
Firebase
Firebase Firestore Setup Firestore Basics Firestore Authentication & Security
Composition API
Composition API Basics Composition API Async Lazy Loading & Suspense Composition API Routing Composition API Vuex Composables (Custom Hooks)
TypeScript
TypeScript Setup & Basics Refs, 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.

Vue High Decoupling

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.

Next
The Vue Api