VueJS 2 + Vuex + Vue router + Jest + Stylus - Everything you need to develop an awesome web app

Introduction

Before we start

Installing and configuring VueJS

JS and ES6

Stylus basics

Webpack basics

Components

Mixins

Plugins

Component life cycle

Template

Styling

Filters

Vuecli

Vuecli templates

Linting

Unit tests

Component data

Computed data

Methods

Watchers

Events

Declarative rendering

Vue directives

v-model

v-bind

v-for

v-if

v-else

v-else-if

v-on

Modifiers

Custom events

Custom directives

Properties

Global styling

Scoped styling

Class bindings

Style bindings

Literal

Dynamic

One-way data flow

Slots

Dynamic Components

Async Components

Creating routes

Dynamic routing

Nested routes

Navigation guards

Meta fields

Lazy loading

Vuex installation

Application state tree

Store

Mutations

Actions

Getters

State

Modules

VueJS Basics

Our awesome application

Using Vuex to handle the state

Jest basics

Improving our application routing

Making our application even more awesome

Who am I?

About the course

Install nvm

Install Node

Install MongoDB

Cloning and running the Back end

Arrow functions

Spread operator

Destructuring

Async/Await

Higher order functions

Closures

Entries

Loaders

Outputs

Commons chunk

Variables

Mixins

Interpolation

Conditional

Iteration

Functions

Installing and configuring VueJS

Component data

Methods

Template - Declarative rendering

Directives - v-bind

Directives - v-if, v-else, v-else-if

Directives - v-for

Events - v-on

Styling - Scoped style and class binding

Computed data

Properties

Component life cycle

Watchers

Simple assertions

beforeEach

Mocks

Spys

Mounting the component and testing the DOM

Creating main view files

Creating routes

Dynamic routing

Loader plugin

Homepage

Search results

Save search

Login

Saved searches

Last searches

Register

VueJS 2 + Vuex + Vue router + Jest + Stylus - Everything you need to develop an awesome web app


This course is focused on the learning of VueJS and its ecosystem to guide the student through the concepts needed to develop awesome web applications.
In the first part, I will present the main concepts required for the understanding, and usage, of the tech stack used to develop our awesome application in the second part.
We will develop together an application to help users choosing between Deezer and Spotify based on the availability of albums, songs and playlists of their preferred artists.
To make it possible to compare searches along the time, the users can save searches and run then again, to make sure that their platform of choice is still worth it.

Contents

Videos