Prior to the training, participants should install specific software and possess a solid understanding of JavaScript. This includes its philosophy, syntax (including recent additions), key built-in objects, and common quirks. Below is a list of said prerequisites.
Comment
Software
Mandatory
Node.js LTS (20.x)
Git 2.40+
Visual Studio Code
Mandatory extensions:
Vue - Official
eslint
Live Share
Strongly recommended extensions:
Vue Ecosystem Snippets
Other recommended extensions:
change-case
gitignore
indent-rainbow
indenticator
Git Graph
GitLens
Recommended
Volta
JavaScript
Mandatory
The 8 types in JS (7 primitive data types, and the object type)
Falsy values
Object initializer and object literals
typeof operator
ESM (ECMAScript Module) (import/export) syntax
Dynamic imports
Promise
arrow function expressions and the differences between them and function expressions and function declarations
async function and
async / await syntax (ES8)
Other ES6 syntax:
Difference between let and const (const does NOT mean constant) and var
Destructuring
Rest parameters
Spread syntax ...
Template literals
Strongly recommended
Difference between JavaScript and DOM and other Web APIs
Recommended
Notions of Functional Programming:
pure functions (= no side effects)
immutability
higher order functions
Proxy
Tools
Environment variables
what is an environment variable
how to modify global environment variable in Windows and/or in POSIX operating systems (macOS, BSD, GNU/Linux)
how to use environment variables in a single command
Web dev tooling
what is a bundler
what is cache-busting
what is a dev server
what is HMR (Hot Module Replacement)
what is tree-shaking
Dev-tools
inspector (firefox)
sources (chromium-based browsers)
console
network
storage
application
Web dev
fetch / axios / ofetch…
_
What is Vue.js
Brief history
The ecosystem
Vite
vue-router
pinia
Vitest
Hands-on: create a simple vite project
create package.json file
add vite
configure dev script
PicoCSS
Introducing UnoCSS
Hands-on: add @picocss/pico to the project and use it
UnoCSS
Introducing UnoCSS
Hands-on: add unocss to the project, configure it and use it
Hands-on: create a simple signup form in basic HTML, CSS and JS
Hands-on: create a script to toggle between dark and light theme
Hands-on: use media query to get the system's preferred theme (dark or light)
Hands-on: use localStorage to remember the user's preferred theme (dark or light)
Hands-on: add eslint @antfu/eslint-config to the project and configure it (config file and scripts)
JavaScript is not reactive
Introducing @vue/reactivity
What is an SFC in Vue
The different parts of an SFC
script
template
style
defineProps()
Handle events in Vue
defineEmits() and $emit
v-model
Slots
default slot
named slots
v-bind
<component>
$attrs
@submit and modifiers
:class
v-if
Introducing Vite plugin for Vue 3
Why a vite plugin
Hands-on: add the plugin to the project and use it
Make it a Vue app
Refactor code to use Vue as app
Refactor code to reuse components (inputs and buttons)
create-vue
Introducing create-vue
Hands-on: create a project that uses Vue, TypeScript,vue-router ,pinia, eslint
Introducing vue-router
What is a URL
What is a route
What is a router
How to create a router
What is a vue-router route
How to create routes with vue-router
Difference between web history and web hash history
Dynamic routes
Props in routes
views directory
Some important directives
v-if and v-show
v-else
v-elseif
v-for
v-text
v-html (careful)
v-on
v-model on custom components
SFC lifecycle hooks
Applying transitions
Managing state with Pinia
Introduction to CSR, SSG, SSR
Introduction to Nuxt