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.

Covid-19: Nous restons ouverts. Cette formation est disponible à distance.

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 NuxtJS

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

Le(s) formateur(s)

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...
• 81 formations au catalogue, 1318 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