Vue.js : Développer des applications web modernes et performantes

Objectifs

    À l'issue de la formation, vous serez capable de :

    

   

1. Maîtriser la Toolchain : Configurer un écosystème de développement JavaScript moderne (Node.js, gestionnaires NPM/Yarn, outils de build et extensions d'IDE).

2. Appliquer les Standards : Maîtriser les concepts fondamentaux d'ES6+ (promesses, asynchronisme, portée) et adopter les bonnes pratiques de clean code.

3. Concevoir des SPA : Bâtir une architecture d'application Single Page Application solide (routage client, manipulation avancée du DOM, gestion d'état logique).

4. Dynamiser l'Interface : Industrialiser la production de vos interfaces en intégrant les API web natives (Fetch) et les outils de tooling indispensables.

5. Fiabiliser le Code : Mettre en œuvre des suites de tests automatisés (unitaires et d'intégration) avec des frameworks modernes pour sécuriser vos livrables.

Programme de la formation

    Programme : JavaScript Moderne & Écosystème Vue.js


    Jour 1 : Révolution SPA, ES6+ & Fondations Vue.js

    Architecture & Tooling : Limites de jQuery et lenteurs du DOM. Pattern MVVM, outillage (Vite/CLI) et composants Single File Components (SFC).


    Syntaxes Core : Options API vs Composition API, variables réactives (ref/reactive), liaisons de données (Data Binding) et gestion des événements.


    Pratique : Modélisation UML d'une SPA native en ES6, puis initialisation d'un projet Vue.js avec liaisons dynamiques et structures de contrôle.


    Jour 2 : Directives Avancées, Échanges Réactifs & Routage UI

    Directives & Logique : Cycle de vie, interpolation, v-model (double sens) vs v-bind, propriétés calculées (computed), affichage de listes et composants dynamiques.


    Extensibilité : Communication inter-composants (Props/Emit), Custom Directives, Render Functions (JSX) et plugins de composants graphiques (Vuetify).


    Pratique : Développement de formulaires contrôlés, découpage d'interfaces complexes et mise en place d'un système de navigation multi-pages avec Vue-Router.


    Jour 3 : Gestion d'État (Pinia), API REST & Industrialisation

    State Management : Centralisation des états globaux. Patterns Flux/Redux appliqués aux architectures modernes avec Pinia (et transition depuis Vuex).


    Qualité & Build : Consommation d'API (Axios/Fetch), typage TypeScript, linter (ESLint), tests de qualité de code et outils de build pour la production.


    Pratique : Intégration d'un store Pinia pour gérer un panier d'achat, interconnexion avec une API REST distante et génération du package final optimisé.

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique