Formation VueJS

I. Introduction

• Présentation, différences avec Angular et React
• Une évolution du dev. web
• Roadmap
• Présentation du TP et récupération des ressources

II. Ecosystème JS moderne

• Javascript dans le Web, Ecmascript
• Quelques outils utiles
• Syntaxe ES6+
• Aperçu de Typescript

III. Utilisation de VueJS avec Vite

• Installation avec Vite
• Structure du répertoire
• Tour de l’app, et simplification
• Quelques outils utiles

IV. Composants - syntaxe option API

• Composants et templating, en bref
• Créer et utiliser un composant
• Structure d'un composant
• Styles globaux
• Données locales
• Evènements
• Méthodes
• Propriétés calculées (computed)
• Templating : Expressions, Conditions, Bindings d'attributs, Directives, Classes, Styles
• Props
• Slots
• Cycles de vie
• Mixins

V. Composants - syntaxe composition API simplifiée

• Avantages de la composition API
• Créer et utiliser un composant
• Etat local, données réactives
• Méthodes
• Propriétés calculées
• Props
• Evènements
• Fonctions composables
• Cycles de vie
• Transmissions de tableaux

VI. API et appels Axios

• Mise en place de l'API
• Lister, lire, ajouter, mettre à jour une ressource avec Axios
• Gestion des erreurs
• Fetch API
• Initialisation de nos films

VII. Routage avec Vue Router

• Mise en place de vue-router
• Créer et utiliser vue-router, en bref
• Créer des pages
• Les afficher avec <router-view />
• Créer des routes
• Lien vers une route : <router-link>
• Redirections : useRouter.push()
• Créer des routes avec paramètres
• Récupérer des paramètres : useRoute().params
• Mise en place d'une fiche de film
• Filtrage par catégorie
• Routes imbriquées
• Routes protégées
• Gestion des erreurs 404
• Transitions

VIII. Gérer les états avec Pinia

• Le défi de synchroniser données et affichage
• Principe des stores
• Pourquoi Pinia ?
• Mise en place
• Créer un store avec l'option API
• Utiliser un store
• Créer un store avec la composition API
• Plugin pinia-persisted-state
• Filtrage par titre
• Transitions de groupes

IX. Aller plus loin

• Composants fonctionnels
• Directives personnalisées
• Variables d'environnement avec Vite
• Déployer son application : front-end
• Variables d'environnement avec Node
• Exemple de déploiement back-end
• Outils pour développer des applications mobiles
• À propos de NuxtJS
• Server Side Rendering
• Pré-rendering