Guillaume Chau

Vue.JS Masterclass

Book Vue.js training delivered from core-team members and industry experts

Uncover the world of Vue.Js with Core Team member, Guillaume Chau. First, a worldwide tech conference speaker, now, Chau is sharing his knowledge in this masterclass!
capgemini
RTL
IPM
societe génerale

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

Guillaume Chau

Vue.js Expert

Remote or On-site

You can decide whether you prefer a remote or on-site classroom experience. You are welcome to join us live at our office, following COVID-19 guidelines, or join us via Zoom link for a visual encounter.

Customized for your team

Let’s talk! What are the needs and goals for your team? Discuss what you need to get out of the course for a customized workshop experience.

Save up to 40%

Hackages is recognized by the KMO Portefeuille of the Flemish Government. Flemish Small and medium enterprises can recover up to 40% of training costs directly if they book training from Hackages.

Plan a training now

Contact our Sales team to plan a private training for your team.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

More trainings