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
• Github repository for this training
• Slides: Introduction to Vue.js - COTRECS octobre 2018

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
  • Langages, style et stack technique
  • Comparison in metaphor
• Tooling
  • Tools to install
  • Node.js
  • Visual Studio Code and Vetur
  • Vue Devtools
  • Vue CLI
  • 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
  • Component Lifecycle
  • Communication between components
  • Parent to Child communication with props
  • Child to Parent Communication with events
  • Slots and Content Distribution
  • Elements References
  • Complete API of Vue Components
  • Vue instance properties
  • Vue instance methods
  • Practical exercise: Decompose our application
• Reactivity
  • Getters / setters (ECMAScript 5)
  • 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
  • Vuex
  • Practical work: Implement a Vuex 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 test?
  • Choose your test runner
  • Write your first test with Jest
  • Mocking
  • Vue Test Utils
  • Jest + Vue Test Utils = 🚀
  • Practical: Test the Film component
• Reusability and composition
  • Mixins
  • Custom directives
  • Plugins
  • Composition API
• Vue Ecosystem
  • UI Frameworks
  • Server-side rendering
  • End of exercises - do what you want