Vue.js

Vue.js est un framework JavaScript progressif destiné à la création d'interfaces utilisateur et d'applications Web modernes, performantes et maintenables.

La formation s'appuie sur Vue 3 et son écosystème moderne : Single File Components, Composition API, réactivité, composables, Vue Router, Pinia, accès aux API, tests et optimisation des performances.

Vue 3 est la version majeure actuelle recommandée pour les nouveaux projets. Le cours s'appuie sur les pratiques modernes de l'écosystème Vue et sur un outillage basé sur Vite.

Durée : 3 jours, soit 21 heures.

• La formation est composée de 75% de travaux pratiques (Mises en situation, débats, exercices). Le formateur alterne entre théorie et pratique ; chaque participant dispose d'un ordinateur sur lequel il réalisera les exercices proposés.
• Une synthèse est proposée en fin de formation. Une évaluation à chaud sera proposée au stagiaire à la fin du cours.
• Un support de cours sera remis à chaque participant comprenant les slides sur la théorie, les exercices et les corrigés de ces derniers. Une feuille d'émargement par demi-journée de présence est fournie en fin de formation ainsi qu'une attestation de fin de formation si le stagiaire a bien assisté à la totalité de la session.

• Comprendre l'architecture d'une application Vue.js moderne
• Maîtriser les fondamentaux de JavaScript/TypeScript utiles à Vue.js
• Créer, configurer et exécuter un projet Vue avec create-vue et Vite
• Concevoir des composants avec les Single File Components et la Composition API
• Maîtriser templates, directives, props, événements et réactivité
• Créer des composables et gérer l'état global avec Pinia
• Configurer le routing avec Vue Router
• Consommer des API REST et tester une application Vue.js

• Développeurs, architectes, chefs de projets techniques

• Une connaissance des technologies Web (HTML, CSS) est impérative pour suivre cette formation dans de bonnes conditions.
• Une bonne connaissance de JavaScript moderne (ES6+) est souhaitable. Une connaissance de TypeScript est un plus mais n'est pas obligatoire.
• Afin de valider les compétences et les pré-requis de chaque participant, en amont de la formation, le formateur organise un entretien téléphonique. Il confirme alors que le participant a le niveau nécessaire et que le contenu répond bien à ses attentes.

Le formateur est un expert du domaine qui intervient sur le sujet depuis plusieurs années en formation mais aussi en conseil.

Doté d'une grande qualité d'écoute, sa pédagogie et sa compétence technique vous permettront d'acquérir les compétences sur Vue.js.

Il saura alterner entre théorie, pratique, et retours d'expérience.

Présentation de Vue.js 3

• Écosystème Vue.js et positionnement du framework
• Architecture d'une application Vue 3
• Création d'une première application
• create-vue, Vite et Vue DevTools

JavaScript / TypeScript JumpStart

• ES6+ : const/let, fonctions fléchées, destructuring et modules
• Objets, tableaux et méthodes fonctionnelles
• Promises, async/await et appels asynchrones
• Introduction à TypeScript et typage des données
• Organisation des modules et configuration du projet

Construire une application Vue.js moderne

• Single File Components (.vue) et <script setup>
• Structure, configuration et organisation du code

Composants et cycle de vie

• Anatomie d'un composant Vue
• Composition API et hooks du cycle de vie
• Communication entre composants : props, emits et v-model

Templates, directives et rendu

• Interpolation, expressions et binding avec v-bind
• Rendu conditionnel et listes : v-if, v-show et v-for
• Slots, templates réutilisables et composants dynamiques

Réactivité et Composition API

• ref(), reactive(), computed() et watch()
• watchEffect(), toRef(), toRefs() et bonnes pratiques
• Gestion des événements, formulaires et v-model
• Créer et réutiliser des composables

Performance : rendu, réactivité, lazy loading et bonnes pratiques

Services applicatifs et accès HTTP

• Organisation de la logique métier avec les composables
• provide() / inject() et injection de dépendances
• Gestion asynchrone et états de chargement
• Appels REST avec fetch / Axios et gestion des erreurs

Routing avec Vue Router

• Configuration du Router et navigation
• Routes dynamiques, imbriquées et paramètres
• Navigation guards et contrôle des accès
• Lazy loading des vues et code splitting
• Navigation programmatique avec useRouter() / useRoute()
• Transitions et bonnes pratiques de navigation

Gestion des formulaires

• Formulaires et liaison bidirectionnelle avec v-model
• Validation, messages d'erreur et états de formulaire
• Composants de formulaire réutilisables
• Validation avancée : principes et bibliothèques de l'écosystème

Gestion d'état avec Pinia

• Création d'un store : state, getters et actions
• Utilisation des stores avec la Composition API

Tests unitaires et E2E avec Vue.js

• Stratégie de tests et testabilité des composants
• Vitest et Vue Test Utils
• Tests de composants, composables et stores Pinia
• Mocks des appels HTTP et dépendances
• Tests E2E : principes et outils modernes (Playwright/Cypress)

Build, déploiement et écosystème Vue

• Build de production avec Vite
• Internationalisation, accessibilité et UI libraries
• Performance, code splitting et bonnes pratiques
• Introduction au SSR/SSG et à Nuxt

1980 € HT

Le distanciel est une modalité que nous pratiquons couramment.

Retengr vous permet aussi de suivre cette formation à distance, sous forme de classe virtuelle (6 participants maximum), avec un formateur expert sur le sujet. La formation se déroule via une connexion en visio conférence (ZOOM, GoogleMeet, Teams ou autres) et vous permet d'alterner théorie et pratique de façon accompagnée ou autonome, le tout dans le respect des objectifs pédagogiques et des évaluations des acquis.

Les émargements, évaluations, attestation de formation, remises des supports de cours et autres documents se feront en ligne.

En ce qui concerne le matériel informatique du participant, il est seulement préconisé un ordinateur et une connexion internet. Nous nous chargeons du reste.

Chaque participant se verra attribuer une Machine Virtuelle qui sera exécutée dans le Cloud d'Amazon. Il disposera alors de la puissance et des outils nécessaires pour le bon déroulement de la formation. Aucune installation de la part du participant n'est requise avant la formation.

Une journée type de formation à distance se décompose de la façon suivante :

Matin :

• 2h de théorie en visioconférence
• 10 à 15 minutes de présentation d'exercices en visio
• 1h de TP en autonomie avec possibilité de solliciter le formateur (partage d'écran à distance pour une assistance efficace).

Après-midi :

• 2h de théorie en visioconférence
• 10 à 15 minutes de présentation d'exercices en visio
• 1h de TP en autonomie avec possibilité de solliciter le formateur (partage d'écran à distance pour une assistance efficace).