Objectifs de la formation

• Mettre en place les outils de développement pour Vue.js
• Connaitre les concepts clés de Vue.js
• Bien structurer les fichiers sources d’une application Vue.js
• Être capable de développer une application Single Page App avec Vue.js
• Dialoguer avec un Back­End depuis une application Vue.JS
• Connaitre les outils pour faire des SSR avec Vue.js

---

Programme de la formation

L'écosystème du développeur JS moderne

• ECMAScript 6 : Le Javascript dans le Web.
• Les nouveautés depuis ES6
• Aperçu de la syntaxe de TypeScript.

Travaux pratiques

Faire un petit exemple de code avec async/await, import/export, const, let et des fonctions fléchées.

Utilisation de VueJS avec Vite

• Installation d'un projet avec Vite.
• La structure d’une application.
• Créer et gérer un projet avec Vite.

Travaux pratiques

Créer le projet Vue.js qui servira de base au reste des TP.

Les composants

• Composants et Templating.
• Créer son premier composant.
• Les styles globaux.
• Les données locales.
• La gestion des évènements.
• Les propriétés et les méthodes.
• Utilisation des Props.
• Utilisation des Slots.
• Le cycle de vie d’un composant.

Travaux pratiques

Créer les composants et le templating du projet.

Répartir son code dans des composants

• Avantages de la composition API.
• Créer et utiliser un composant.
• Etat local, données réactives.
• Les fonctions composables.
• Transmission de tableaux.

Travaux pratiques

Refactorisation du code de l'application : répartition dans des sous-composants.

Gérer la navigation avec Vue Router

• ­Mise en place de vue­router.
• Créer et afficher des pages avec vue­router. ­ Créer et configurer des routes.
• ­Créer des routes imbriquées.
• ­Créer des routes protégées.
• ­Gestion des erreurs 404.
• Les transitions.

Travaux pratiques

Mettre en place la navigation avec Vue router.

Gérer les APIs et les appels Axios

• Mise en place de l'API.
• Lister, lire, ajouter, mettre à jour une ressource avec Axios.
• Gestion des erreurs.
• Utilisation de FetchAPI.

Travaux pratiques

Utilisation d’une API vers un serveur externe.

Gestion des données avec Pinia

• La synchronisation des données et de l’affichage.
• Utilisation du Store.
• Mise en place de Pinia.
• Créer et utiliser un store avec l'option API.
• Utilisation du Plugin pinia-persisted-state.
• Utilisation des transitions de groupe.

Travaux pratiques

Optimiser l'architecture de l'application par la conversion à Pinia.

Pour aller plus loin…

• Les composants fonctionnels.
• Les Directives personnalisées.
• Les Variables d'environnement avec Vite.
• Déployer son application en Front-End.
• Les variables d'environnement avec NodeJS.
• Le déploiement en Back-End.
• Les outils essentiels pour développer des applications mobiles.
• Utilisation du Server­Side Rendering – SSR.
• Utilisation du Pré­Rendering.
• ­Initiation à NuxtJS/VitePress.

Travaux pratiques

Améliorer la qualité du code de l'application.