Vue js 3 Practical Guide w/ Composition API, Router (2022)

Vue js 3 is a progressive javascript framework for building user interfaces. This is a project–based course for learning Vue js. I will teach you how to build some projects with Vue from the simple to the complex project.

1st Project: Tags Input

We’ll start by building a simple Tags input, a Vue js based tagging system which automatically converts the values that users enter in the input into delimited tags.

While we’re building this project we’ll learn some Vue js basic concepts such as:

Interpolation

Directives

Attribute bindings

Conditional rendering,

List rendering

Class and style bindings

Handling events

Two way bindings with v–model

Methods

Computed properties

Watcher

2nd Project: Toast Notification

We will build Toast notification, where we able to show a message in a given times with some different types and positions.

3rd Project: Carousel Image slider

We will build Carousel image slider from scratch which allows user to automatically cycle through a series of images in a given time.

4th Project: Vue Drive (Main Project)

Our main project is building Vue Drive, a Vue Single Page Application (SPA) that inspired by Google Drive, where we able to upload some files with drag and drop feature, and manage them in folders.