Welcome

Welcome to this training dedicated to Vue.js and its ecosystem 😃

TIP

This training is also available in French / Cette formation est aussi disponible en Français

Prerequisites

• Basic knowledge of JavaScript and a bit about Node.js
• Basic knowledge of HTML
• Prepare your dev environment and install stuff before the session (see Tooling section)

Useful links

• Official Vue.js documentation (opens new window)
• Github repository for this training (opens new window)
• Slides: Introduction to Vue.js - COTRECS octobre 2018 (opens new window)

Table of contents

• Welcome
  • Prerequisites
  • Useful links
  • Table of contents
• Presentation of Vue.js
  • What is Vue.js?
  • History
  • Development team
  • Business model and funding
  • Popularity
  • Comparison between the frameworks
  • Similarity between these 3 frameworks:
  • Product positioning / self-description
  • Language, programming style and technical stack
  • Comparison in metaphor
  • Vue 3 or Vue 2 ?
• Tooling
  • Tools to install
  • Node.js
  • Visual Studio Code and official Vue extension (Volar)
  • Vue.js without build step (runtime only)
  • Practical Work: Create your first project
  • Work in developer mode
  • Build for production
  • Project configuration
• Vue files
  • Overview of a Vue project
  • Single File Components *.vue
  • Work with components
  • Text interpolation in templates
  • Practical Work: Your first component
• Directives
  • v-bind: Bind properties
  • Bind classes and styles
  • v-model: Forms and inputs
  • v-if: Conditions
  • v-for: Loops
  • v-on: Events
  • Modifiers
  • Practical work: Film card
• Components
  • Methods
  • Computed and watchers
  • Practical Exercise: Search movies
  • Component Lifecycle
  • Communication between components
  • Parent to Child communication with props
  • Child to Parent Communication with events
  • Slots and Content Distribution
  • Elements References
  • Practical exercise: Decompose our application
  • Complete API of Vue Components
  • Vue instance properties
  • Vue instance methods
• Reactivity
  • Proxies (ECMAScript 6 aka ES2015)
  • Details of Vue reactivity system
• State management
  • Why a state management solution ?
  • Data shared by reference
  • Store and controled mutations
  • Pinia
  • Practical work: Implement a Pinia store
• Routing
  • Installation
  • Router Configuration
  • Navigation and router-link
  • Practical Work: Implementing the router
• HTTP Requests
  • Architecture
  • Practical Work: Communicate with a back-end
• Unit tests
  • Why should I write automated tests ?
  • Different types of automated tests
  • Choose your test runner
  • Vue Test Utils
  • Write your first test with Vitest and Vue Test Utils
  • Mocking
  • Practical work: Test the Film component
• Reusability and composition
  • Composition API
  • Custom directives
  • Plugins
• Vue Ecosystem
  • UI Frameworks
  • Server-side rendering
  • End of exercises - do what you want