Nuxt.Js : Initiation + Approfondissement

Développeurs Javascript

Bonnes connaissances de Javascript

Réaliser des applications frontend en Nuxt.Js

Introduction

Présentation et comparaison des différents framework Javascript : Angular, React, Next, Vue, Nuxt...
Présentation de Node.JS et npm
Historique des versions de Vue et Nuxt
Présentation de la notion de Single Page Application et de Composant
Présentation de Vite et Webpack
Créer une application avec npm et la CLI

Découvrir ECMAScript

Spécification ECMAScript
Fonctions fléchées,
Design patterns
Définition de modules
Système natif de gestion des modules, chargement
Gestion des dépendances
La communication asynchrone ( Promesses, async await )

Créer une application Nuxt JS

Les différentes manières de créer une application
Choisir son template
Comprendre l’architecture d’un projet

Concevoir des Single Files Components

Présentation des composants monofichier
Comprendre la syntaxe de template : interpolation et data binding
Afficher du rendu conditionnel
Afficher des listes

Comprendre la Composition API de Vue 3

Composition vs Option API
La fonction setup
Surveiller l’état des données
Gérer les événements
Créer des méthodes
Utiliser les propriétés calculées
Surveiller ses données avec les watchers

Communiquer entre les composants

Créer une architecture de composants parents / enfants
Passer des informations entre les composants : les props et les slots
Créer des événements personnalisés

Concevoir ses pages

Présentation de Vue Router
Créer ses pages et configurer ses routes
Créer des pages imbriquées
Passer des informations avec les paramètres
Protéger ses routes avec des middlewares

Gérer les formulaires :

Récupérer les données d’un formulaires
Accéder aux éléments du DOM avec Template Ref
Découvrir les outils de validation externes : Vee-validate, Vuelidate

Atelier: Créer un formulaire avec validation

Communiquer avec une API

Le helper $fetch,
useFetch, useLazyFetch,
useAsyncData, useLazyAsyncData,
Rafraichir les données

Atelier: Afficher des données depuis une API externe

Gérer les données avec les stores

Présentation du concept de store, et des différents outils existants
Mise en place de store : Vuex, Pinia
Gérer les données dans le store : état, modifications, actions asynchrones

Atelier: Mettre en place un système de panier avec le store

Mettre en place le Server Side Rendering et améliorer le SEO

Qu’est-ce que le SRR,
Configurer son application,
Gérer les entêtes et les méta informations

Active Learning

contrôle continu ou certification si prévue dans le financement