Formation Nuxt.js

Formation Nuxt.js

Apprennez à créer une application Web dynamique et performante avec le meta-framework NuxtJS !

Prix (Formation inter-entreprise)

1800€ HT / personne

Durée

3 jours

Dates

Nous pouvons organiser des sessions à d'autres dates ou dans d'autres villes (Bordeaux, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Strasbourg, Toulouse...)

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

Le(s) formateur(s)

Jérémy DUMAYE

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 les langages web tels que HTML, CSS, JavaScript, VueJS, 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.

Voir son profil détaillé

Romain PETIT

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.

Voir son profil détaillé

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

  • une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
  • de nombreux clients qui nous font confiance depuis des années
  • un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
  • 119 formations au catalogue, 1548 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
  • la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation

Besoin d'aide ?

Vous souhaitez discuter avec nous à propos de votre projet de formation ?
Vous voulez plus d'information sur une formation ou notre fonctionnement ?


Rappel Email

Nos forces

  • Des formations à taille humaine
  • Des formateurs passionnés
  • Des véritables workshop
Accéder au Manifeste

Nos clients

Formation Nuxt.js

Apprennez à créer une application Web dynamique et performante avec le meta-framework NuxtJS !

Formation Nuxt.js

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

Le(s) formateur(s)

Jérémy DUMAYE

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 les langages web tels que HTML, CSS, JavaScript, VueJS, 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.

Voir son profil détaillé

Romain PETIT

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.

Voir son profil détaillé

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

  • une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
  • de nombreux clients qui nous font confiance depuis des années
  • un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
  • 119 formations au catalogue, 1548 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
  • la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation

* Nombre de personnes ayant répondu au questionnaire de satisfaction sur cette formation depuis 2012