Formation Nuxt.js

Description

Cette formation NuxtJS vous permettra de comprendre la philosophie du framework et de prototyper rapidement une application web performante avec Vue.js.

Pendant 3 jours, vous apprendrez à :

• installer et structurer un projet Nuxt
• maîtriser le templating Vue (props, directives, events, slots)
• organiser pages, layouts, routing automatique
• gérer l’état global (Vuex) et consommer une API
• intégrer des plugins/modules (Axios, vue-select), hooks (validate) ;
• diagnostiquer et corriger les erreurs (devtools, logs)

Public

La formation s’adresse à toute personne souhaitant découvrir ce framework et ayant des notions en Vue.js, JavaScript, HTML et CSS.

Les objectifs

• Découvrir la philosophie et le fonctionnement du framework NuxtJS et de la librairie Vue.js
• Prototyper les bases d'une application Web
• Savoir utiliser les outils de développements NuxtJS dans un navigateur, un IDE et un terminal
• Réutiliser du code grâce aux composants
• Apprendre les bases des modules communautaires et plugins
• Gérer un store de données et lien avec une API

Pré-requis

• Minimum d’expérience avec Vue.js, JavaScript, HTML et CSS
• Ordinateur portable à apporter

Le programme de la formation Nuxt.js

Jour 1 : une application web simple avec Nuxt

• Introduction
  • Le framework Vue
  • Écosystème Vue : vue-router, vue-meta, etc.
  • Framework Nuxt
  • Écosystème Nuxt et philosophie (modules communautaires, unjs, vue-meta, etc.)
• Les bases de Vue.js sous Nuxt
  • Présentation de la structure d'un projet Nuxt (fonction des répertoires et des fichiers de base)
  • Templating (Interpolation, Attributs / props, Directives, Boucles)
  • v-model Inputs Natifs)
  • Rendering conditionnel
  • Propriétés calculées et méthodes
  • Écoute d'événements
  • Slots
• Structurer son code : pages et layouts
  • Le routing automatique au travers du répertoire page
  • Mutualiser le code de ses pages au travers des layouts
  • Introduction à NuxtChild

Mises en pratique sur le projet fil rouge : Création d'un catalogue de films, avec des listing, des catégories et une page film
- Création d'une application avec "yarn create nuxt-app”
- Création d'une page et d’un composant
- Utilisation d’un fichier CSS
- Définition d’un favicon
- Mettre des liens dans ses pages via NuxtLink
- Mise en place d'un header via un layout par défaut

Jour 2 : une application faite de composants et de données

• Un state global avec Vuex
  • Que est ce qu'un Store : pourquoi et quand utiliser vuex ?
  • Vuex (State, Getters, Mutations, Actions, Modules)

Mise en pratique :
- Installation du projet
- Mise en place de la page d’accueil
- Création des composants principaux associés
- Utilisation d’une action pour récupérer de la donnée dans un module
- Création d’une page d’ajout de films et sauvegarde dans le store
- Définition des catégories dans le store racine

Jour 3 : cycle de vie, plugins et API

• Le cycle de vie
  • Le cycle de vie de Vue.js
  • Le cycle de vie de Nuxt
  • Le context de Nuxt
• Utilisation de plugins
  • Accès au context
  • Utilisation de la méthode inject
• Manipuler des données distantes
  • Introduction aux modules communautaires
  • Installation du module communautaire Axios
  • Récupération de données au travers de fetch
  • Récupération de données au travers d'asyncData

Mise en pratique :
- Mise en place d’un plugin : vue-select et utilisation pour filtrer des catégories
- Utilisation du hook validate
- Installation du module communautaire Axios
- Mise en place de la data
- Gestion de message d’erreur

Bonus

En fonction des profils des participants, et du temps restants, les notions suivantes pourront être abordées.

• Middlewares
• Discussions sur Nuxt 3
• Utilisation des helpers d'Axios

Télécharger le programme

Formations associées

• 

  Next.js avancé : personnalisation

  1 jour
• 

  Next.js avancé: JS client

  1 jour
• 

  Next.js

  3 jours

Formateurs

Jérémy DUMAYE

Développeur web Full Stack, et adepte des conseils en ergonomie web, et UX/UI, Jérémy intervient en tant que Lead pour différentes équipes, pour des agences qui ont des besoins précis en développement, ou encore avec des clients finaux pour un projet web bien défini.
Sa vision UX/UI lui permet également de proposer des wireframes complets pour créer une structure graphique personnalisée au besoin du client afin de réaliser et développer le site ou l'application web par la suite.

Maîtrisant des technologies web telles que HTML, CSS, JavaScript, Vue.js, PHP, ou encore Laravel, il passe également une grande partie de son planning pour transmettre son savoir en tant que formateur, une passion pour lui depuis de nombreuses années.

Que ce soit pour des étudiants en école supérieure de développement, ou des professionnels qui souhaitent augmenter leurs compétences, il prend du plaisir à apporter ses compétences et son expertise en étant un grand adepte de la pratique sur des cas concrets, tout en prenant soin de bien valider que tout a été bien assimilé et appris pour chacun de ses élèves.

Romain PETIT

Romain est consultant indépendant sur des technologies web front-end depuis 2012.
Il utilise le framework JavaScript Vue.JS et Nuxt au quotidien pour développer des applications. Il croit en un web accessible, et défend la JAMstack.

Romain donne des formations depuis 6 ans pour différentes structures: Le Campus Numérique in The Alps sur des formations innovantes, avec l'Université de Grenoble Alpes et Oxiane.

Il monté le collectif d'indépendants et espace de travail Le Médiastère au centre ville de Grenoble, son camp de base.
Depuis 2020, il a rejoint l'équipe de BackMarket.

FAQ

8 raisons de participer à une formation Human Coders

• Satisfaction client élevée : Un taux de statisfaction de 4,6/5 depuis 2012 (sur 1722 sessions réalisées). 99% des participants se disent satisfaits de nos formations
• Approche pédagogique unique : Des formations en petit groupe, des formateurs passionnés et expérimentés, de véritables workshops... (Plus d'infos sur notre manifeste)
• Catalogue de formations complet : 185 formations au catalogue, de quoi vous accompagner sur tout vos projets
• Écosystème dynamique : Nous accompagnons les dev depuis 13 ans avec des initiatives comme Human Coders News, les Human Talks, le podcast ou encore notre serveur Discord
• Financement facilité : Organisme certifié Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• Références clients prestigieuses : De nombreux clients qui nous font confiance depuis des années
• Accompagnement sur mesure : Nous vous proposons un accompagnement personnalisé par nos consultants pour vous aider dans vos projets au-delà de la formation
• Valorisation professionnelle : Remise d'un diplôme, d'une attestation et d'une certification, suivant les formations effectuées, que vous pourrez afficher sur vos CV et réseaux sociaux