Vue.JS Masterclass

Description

This beginner-level Master-class will introduce you to building your own applications from scratch with Vue. You'll have a better understanding of the main API provided with the library, and also get to use some of the official tools and companion libraries of the framework.

Practical work is a strong focus of this workshop as you will create web apps with the help of the trainer.

‍Duration: 3 Days

Required skills: Good JavaScript experience

‍

Table of contents

Day 1 - Web Application with Vue.js

Introduction

• SPA & JS frameworks
• Vue.js Presentation
• Basic reactivity example
• Basic templating examples

Basics

• Vue Instance
• Template

• Text interpolation
• Directive: v-bind
• Directive: v-model
• Looping with v-for
• Conditionals with v-if

• Computed properties
• Listen to events with v-on
• Reactive classes & styles

Practical work:

• Elements list
• Adding/editing/deleting elements
• Search field

Day 2 - Components

Components

• What is a component and why use them?
• Props
• Events
• Use components inside components
• Simple slots
• Dynamic components

Practical work:

• Use Vue CLI
• Single File Component (.vue files)
• Refactoring and splitting into components
• Make components communicate with each other

Day 3 - Plugins, API & Router

Extend Vue & the components

• Mixins
• Plugins

Practical work:

• Use the API with axios
• Custom plugin

Router & virtual pages

• Introduction to Vue Router
• Routes
• Route views
• Links
• history mode

Practical work:

• Structure the app with routes

Bonus

• Depending on how well the training progresses and on the remaining time, the trainer might also include optional additional topics.

Transitions & Animation

• Simple CSS transitions
• List transitions

Practical work:

• Animate the elements list

State Management with Vuex

• Introduction to Vuex
• Alternatives
• State
• Mutations
• Getters
• Actions
• Modules (bonus)

Practical work:

• Refactor the app to use Vuex to manage state

‍