Formation Nuxt 3

Cette formation a pour objectif de vous apprendre à créer une application web en utilisant le framework Nuxt 3.

À travers l'écriture d'une application de catalogue de films, vous découvrirez par la pratique les principes fondamentaux du framework Nuxt :

  • réactivité de VueJS

  • approche composant

  • réutilisabilité par les plugins, composables et modules

  • rendus différenciés (SSR / CSR / …)

  • architecture applicative facilitant la collaboration et la maintenabilité

Le framework Nuxt présente de nombreux avantages grâce à un ensemble de composables préexistants, rendant plus facile et rapide la création d'applications réactives, performantes et adaptées pour le Search Engine Optimization (SEO).

Objectifs pédagogiques

  • Réviser et maîtriser le système de réactivité VueJS

  • Savoir créer et structurer une application basée sur Nuxt

  • Comprendre ce qu'est le Server Side Rendering et comment l'utiliser dans Nuxt

  • Comprendre les différents modes de rendu (SSR / CSR / ESR / …)

  • Savoir utiliser et écrire des composables

  • Gérer l'authentification dans une application Nuxt

Formation Nuxt 3 en détail

 Programme

1. Création d'une application Nuxt

Rappels VueJS

  • réactivité

  • Virtual DOM

  • principales directives

La CLI Nuxt

  • création d'une application

  • utilisation de TypeScript

Architecture d'une application Nuxt

  • composables

  • composants

  • pages / routage

  • layouts

Debug d'une application Nuxt

SSR / SSG / CSR / … : essais des différentes stratégies de rendu

Gestion de données asynchrones via l'API mise à disposition

 

2. Optimisation de l'application pour le temps réel et le SEO

 

Authentification : gestion à travers les pages rendues côté client et/ou serveur

  • Création de nouvelles pages permettant la modification des données

Middlewares

  • protection de pages nécessitant une autorisation

Modules : installation et configuration de modules

 

SEO : configuration des pages pour un référencement adapté

  • pour chaque page de détail d'un film, ajout de meta tags

Centralisation de la donnée

 

3. Aspects avancés

 

Qualité 

  • tests unitaires / composants

  • Storybook (Histoire / Storybook)

  • tests d'intégration (Cypress / PlayWright)

Module Content

 

Création de module (avancé)

  • composable

  • pages, composants, layouts

Déploiement

 

 Public et pré-requis

Public

  • Développeurs

  • Architectes techniques

  • Chefs de projets Web

Pré-requis

  • Bonnes connaissances du JavaScript / TypeScript (la formation sera faite en TypeScript)

  • Connaissance NodeJS, npm

  • Connaissance VueJS

Personne en situation de handicap

Pour toutes questions relatives à l’accueil d’un participant présentant un handicap, merci de nous contacter préalablement avant toute inscription.

 Ingénierie pédagogique

Moyens pédagogiques et techniques

  • Les supports de cours (slides) seront disponibles en ligne et distribués en début de formation (à l'aide d'un lien vers notre outil interne ou d'une version numérisée), puis fournis au format électronique à la fin de la formation.
  • Une salle de formation équipée d'une connexion Internet, d'un vidéoprojecteur, paperboard. Ou une salle virtuelle pour les formations à distance (FOAD).
  • Un ordinateur par stagiaire avec un système d'exploitation installé et les outils nécessaires.

Modalités de suivi de l'exécution du programme

  • Durant la formation: alternance d'apports théoriques (30% du cours), d’exercices pratiques et de mise en situation sous forme de travaux pratiques corrigés avec l’expert-formateur.
  • En fin de formation: évaluation à chaud sur l'atteinte des objectifs pédagogiques sous forme de tour de table et de test de connaissances, d'exercices, de QCM.

Moyens d'encadrement

Formation assurée par un expert-formateur Nuxt ayant une expérience significative en développement.