Accueil Room: Maison de l’Orient et de la Méditerranée (MOM), Salle visioconférence (3ième étage) **Lien ZOOM :** https://cnrs.zoom.us/j/98302568840?pwd=TDqjMX5zVUA3vcv2hWcDLX5PLNICCz.1 **ID de réunion :** 983 0256 8840 **Code secret:** T3xswr

Introduction à Vue.js 3

• Jaime Arias (CNRS, LIPN, Université Sorbonne Paris Nord)
• Bertrand DAVID-JACQUOT (CNRS)

Room: Maison de l’Orient et de la Méditerranée (MOM), Salle visioconférence (3ième étage) • Vue d’ensemble de Vue.js et de son évolution. • Avantages de Vue 3 pour le développement web moderne.

Configuration de l’environnement

• Jaime Arias (CNRS, LIPN, Université Sorbonne Paris Nord)

Room: Maison de l’Orient et de la Méditerranée (MOM), Salle visioconférence (3ième étage) - Installation de Vue 3 avec Vite/CLI. - Présentation de la structure du projet et des outils (Node.js, npm, yarn). - Création d’un premier projet Vue simple.

Concepts de base de Vue 3

• Jaime Arias (CNRS, LIPN, Université Sorbonne Paris Nord)

Room: Maison de l’Orient et de la Méditerranée (MOM), Salle visioconférence (3ième étage) - Les instances Vue et le DOM virtuel. - La syntaxe des templates. - Les directives (v-bind, v-if, v-for, v-model, etc).

Composants dans Vue 3

• Jaime Arias (CNRS, LIPN, Université Sorbonne Paris Nord)

Room: Maison de l’Orient et de la Méditerranée (MOM), Salle visioconférence (3ième étage) - Création de composants réutilisables - Props et événements - Slots et slots avec portée (scoped slots) - Hooks du cycle de vie des composants

API de composition (Composition API)

• Jaime Arias (CNRS, LIPN, Université Sorbonne Paris Nord)

Room: Maison de l’Orient et de la Méditerranée (MOM), Salle visioconférence (3ième étage) - Fonction setup() et gestion des états réactifs (ref, reactive). - Observateurs (watch) et propriétés calculées (computed).

Gestion d’état avec Pinia

• Jaime Arias (CNRS, LIPN, Université Sorbonne Paris Nord)

Room: Maison de l’Orient et de la Méditerranée (MOM), Salle visioconférence (3ième étage) - Introduction à Pinia pour la gestion des états dans Vue 3. - Création et manipulation de stores. - Actions, mutations, et partage des états.

Routage avec Vue Router

• Jaime Arias (CNRS, LIPN, Université Sorbonne Paris Nord)

Room: Maison de l’Orient et de la Méditerranée (MOM), Salle visioconférence (3ième étage) - Mise en œuvre du routage client : - Configuration de Vue Router. - Routes dynamiques et imbriquées. - Garde de navigation.

Projet pratique

• Jaime Arias (CNRS, LIPN, Université Sorbonne Paris Nord)

Room: Maison de l’Orient et de la Méditerranée (MOM), Salle visioconférence (3ième étage) - Création d’une application complète guidée par le formateur - Fonctionnalités à implémenter : - Gestion des données avec Pinia. - Navigation entre pages avec Vue Router. - Utilisation de la Composition API. - Assistance en direct pour les participants pendant le projet.

Q&R et conclusion

• Bertrand DAVID-JACQUOT (CNRS)
• Jaime Arias (CNRS, LIPN, Université Sorbonne Paris Nord)

Room: Maison de l’Orient et de la Méditerranée (MOM), Salle visioconférence (3ième étage) - Résolution des dernières questions des participants. - Discussion sur les prochaines étapes et les ressources pour approfondir Vue 3.