Formation Nuxt.js

Description

Cette formation a pour objectif de vous apprendre à créer une application Web dynamique et performante avec le meta-framework NuxtJS 3 (il est possible également sur demande spécifique de réaliser la formation avec la version 2 de NuxtJS).

Dans cette formation NuxtJS, vous découvrirez par la pratique les bases de NuxtJS et son environnement de développement, ainsi que les notions clés de Vue.js.
Le projet fil rouge, consistant à créer un annuaire de films; vous permettra d'aborder toutes les notions clés du framework et de les mettre vous-même en application.

La formation s’adresse à toute personne souhaitant découvrir ce framework et ayant des notions en Vue.js, JavaScript, HTML et CSS. Les bases de Vue.js seront revues lors de cette formation.
Vous ressortirez de cette formation NuxtJS avec une vision nouvelle sur ce que peut être une application web développée en Vue.js.

En quelques mots, NuxtJS, est un framework basé sur Vue.js, simple et implicite, pour créer des interfaces Web dynamiques et performantes. Il vous rendra le développement web simple et rapide : avec Nuxt, plus besoin de configurer Vue.js (router, store, ...) et d'autres dépendances telles que Webpack ou Babel.
Ce framework fait tout à votre place pour vous laisser vous occuper du cœur de votre métier : le développement de nouvelles fonctionnalités business.

A l’issue de cette formation NuxtJS, vous repartirez avec le code source de votre projet, construit ensemble au fil des exercices et du fil rouge.

Le projet fil rouge : Création d'un catalogue de films, avec des listing, des catégories et une page film.

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
• Ecosystème Vue : vue-router, vue-meta, ...
• Framework Nuxt
• Ecosystème Nuxt et phylosophie (modules communautaires, unjs, vue-meta, ...)

Mises en pratique sur le projet fil rouge :
- Création d'une application avec "yarn create nuxt-app”

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

Mises en pratique :
- Création d'une page et d’un composant
- Utilisation d’un fichier CSS
- Définition d’un favicon

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 :

• 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

Mise en pratique(matin) :
- Installation du projet
- Mise en place de la page d’accueil
- Création des composants principaux associés

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 :

• 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

Mise en pratique :

• Mise en place d’un plugin : vue-select et utilisation pour filtrer des catégories
• Utilisation du hook validate

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 :

• 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

• 

  Vue.js Avancé

  3 jours
• 

  Vue.js 3 et l’API de Composition

  0.5 jours
• 

  Next.js avancé : personnalisation

  1 jour

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 1700 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 : 177 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