Nuxt.js est le framework Vue le plus intuitif disponible aujourd’hui. Il combine la puissance de Vue.js avec des fonctionnalités de rendu côté serveur pour le rendre plus puissant. Vous pouvez construire une application complète de rendu côté client Vue.js, une application complète générée statiquement et une application monolithique.

Nuxt.js résout le problème de la structuration de votre projet Vue.js car il est livré avec une architecture de développement frontale prête pour l’entreprise. Les fonctionnalités de Nuxt.js sont déjà structurées à l’aide de normes industrielles pour créer des applications d’entreprise.

Ce guide explorera Nuxt.js, ce que vous pouvez construire avec lui, et comment il fonctionne de l’intérieur.


Qu’est-ce que Nuxt.js ?

Nuxt.js est un framework de rendu côté serveur construit sur Vue.js. Il fait abstraction de la plupart de la configuration complexe impliquée dans la gestion des données asynchrones, des intergiciels et du routage. Il aide également à structurer les applications Vue.js à l’aide d’une architecture standard de l’industrie pour construire des applications Vue.js simples ou d’entreprise.

Logo officiel de Nuxt.js.
Logo officiel de Nuxt.js. (Source : Medium)

A quoi sert Nuxt.js ?

Nuxt.js vous permet de créer de nombreux types d’applications différentes. Vous trouverez ci-dessous les trois applications les plus populaires réalisées avec Nuxt.js.

Pages générées statiques

Ce type de site web ne nécessite aucune source de contenu externe – le contenu est déjà intégré dans le HTML. Les exemples de ce type de sites web incluent les sites web de portfolio, de démo et de tutoriel.

Applications à page unique (Single-Page Application ou SPA)

Cette approche de développement frontend récupère du contenu dynamique à partir d’une API externe et l’affiche du côté client. La plupart des frameworks JavaScript tels que Vue.js, React.js, Angular et Ember.js sont tous des frameworks d’applications mono-pages.

De plus, le système de routage d’une SPA est réalisé à l’aide de l’API HTML 5 History ou du hachage d’emplacement pour le routage, ce qui donne aux développeurs la possibilité de modifier l’URL d’un site web sans rafraîchissement complet de la page.

Applications universelles

Application universelle est un terme qui décrit l’utilisation d’une approche de rendu côté serveur pour récupérer les données côté client sur le serveur avant de rendre entièrement la page sur le navigateur client.

Le rendu côté serveur (Server-Side Rendering ou SDR) est un problème connu dans Vue.js car il implique des configurations fastidieuses pour l’obtenir correctement.

Nuxt.js résout le problème du SSR dans Vue.js, ce qui est utile pour l’optimisation des moteurs de recherche (SEO). Nuxt.js peut même étendre les applications universelles pour accueillir une application monolithique à part entière, où le frontend et le backend partagent une seule base de code.

Comment fonctionne Nuxt.js ?

Nuxt.js fonctionne de la même manière qu’un framework côté serveur lorsqu’un utilisateur visite un site web. Si le rendu côté serveur est activé, les requêtes sont rendues sur le serveur chaque fois que l’utilisateur demande une page, donc un serveur est nécessaire pour pouvoir servir la page à chaque requête. De même, si le rendu côté client est activé, il rend le contenu de la page dans le navigateur à l’aide de JavaScript.

Ce sont les principales actions et méthodes utilisées dans Nuxt.js :

  • nuxtServerInit (Action) : Il s’agit du premier hook du cycle de vie qui est appelé du côté serveur si le stock Vuex est activé. Il s’agit d’une action Vuex qui est appelée uniquement du côté serveur pour pré-remplir le stock et enfin, elle peut être utilisée pour distribuer d’autres actions dans le magasin Vuex.
  • validate() (Fonction) : La méthode validate est appelée avant le rendu des composants de la page. Elle est utile pour valider les paramètres dynamiques d’un composant de page.
  • La méthode asyncData() est utilisée pour récupérer les données et les rendre côté serveur, tandis que la méthode fetch() est utilisée pour remplir le stock avant de rendre la page.

Par exemple, lorsqu’un site Nuxt.js reçoit une première visite de page, il fait appel à l’action nuxtServerInit pour mettre à jour les états Vuex (s’ils sont définis dans le stock Vuex). Sinon, si le nuxtServerInit n’est pas défini, il passe à une autre étape.

Ensuite, elle recherche les intermédiaires dans cet ordre. D’abord, il vérifie le fichier nuxt.config.js pour tout middleware global. S’il est défini, il sera exécuté avant de vérifier les pages layout pour les intergiciels. Enfin, il exécute les intergiciels des pages individuelles, y compris les enfants des pages.

Après avoir exécuté tous les middlewares dans l’ordre, il vérifiera si la route est dynamique et exécutera la méthode validate() créée et validée.

Ensuite, il appelle la méthode asyncData() de la page pour récupérer et rendre les données du côté serveur avant d’appeler la méthode fetch() pour remplir le stock Vuex du côté client.

À ce stade, la page devrait avoir toutes les données et le contenu nécessaires pour afficher une page web correcte. Ensuite, la page est rendue par le moteur Nuxt.js et montrée au visiteur, terminant ainsi le processus.

Cet organigramme illustre toutes les étapes nécessaires au rendu d’une seule page :

Un aperçu des hooks du cycle de vie de Nuxt.js.
Un aperçu des hooks du cycle de vie de Nuxt.js. (Source : Site web Nuxt)

Quel que soit l’outil que vous utilisez, vous vous sentirez toujours plus confiant lorsque vous comprendrez comment l’outil fonctionne sous le capot. Avec l’explication ci-dessus de la façon dont Nuxt.js fonctionne sous le capot, il sera facile de le comprendre. Explorons les avantages de l’utilisation de Nuxt.js pour votre prochain projet.

Avantages de Nuxt.js

Ensuite, parlons des avantages du framework Nuxt.js et des raisons pour lesquelles il est devenu si populaire ces derniers temps.

Créez des applications universelles sans tracas

Nuxt.js rend la création d’applications de rendu côté serveur très facile. Si vous avez déjà essayé de développer une application à rendu côté serveur avec Vue.js, vous avez probablement sauté des obstacles difficiles en raison de la myriade d’options de configuration disponibles pour le côté serveur et le côté client.

La fonctionnalité SSR est déjà intégrée à Nuxt.js et est facile à utiliser. Elle donne accès aux propriétés isServer et isClient de vos composants pour décider si vous effectuez un rendu côté client ou côté serveur.

Il fournit également la méthode asyncData dédiée à la récupération et au rendu des données côté serveur de votre composant de page.

Rendu statique des applications Vue avec Universal Benefit

Les sites web générés de manière statique sont en hausse dans l’industrie du web. Avec une seule commande nuxt generate, vous pouvez générer une version statique de votre site web, avec tout le HTML avec les routes correspondantes.

La commande nuxt generate fonctionne exactement comme l’approche de l’application universelle avec toutes les fonctionnalités SSR activées, mais pour un site web généré statiquement.

Dans Nuxt.js, un site web généré statiquement revient à construire une application universelle puissante sans serveur pour alimenter la fonctionnalité SSR.

Obtenez le fractionnement automatique du code

L’une des raisons pour lesquelles les performances de Nuxt.js sont très rapides est la fonction de division du code, qui permet de donner à une route un seul fichier JavaScript contenant uniquement le code nécessaire à l’exécution de cette route, réduisant ainsi la taille de votre application.

Cette fonction de division du code utilise la configuration Webpack qui est intégrée lors de la génération d’une version statique de votre site web.

Rechargement à chaud

Le rechargement à chaud est une excellente fonctionnalité ajoutée pour résoudre la méthode de développement de logiciels par changement et rafraîchissement, qui prend beaucoup de temps.

Elle est configurée pour mettre à jour automatiquement le serveur de développement lorsque vous modifiez un fichier dans le répertoire racine.

Lorsque vous développez et travaillez sur les fichiers .vue, Il utilise une configuration Webpack pour vérifier les modifications et compile tout pour vous. Cette approche permet aux développeurs de gagner du temps et favorise un développement plus rapide des applications.

Obtenez la compilation ES6/ES7

Nuxt.js est livré pré-construit avec Webpack et Babel pour traduire et compiler les dernières versions de JavaScript comme ES6 et ES7 en JavaScript qui peut fonctionner sur les anciens navigateurs.

Babel est configuré pour compiler tous les fichiers .vue et le code ES6 à l’intérieur des balises de script en JavaScript qui fonctionne sur tous les navigateurs.

Cette fonctionnalité résout le problème de la création manuelle d’applications compatibles avec les navigateurs et de la mise en place de la configuration depuis le début.

Comment créer une application Nuxt.js

Cette section va explorer comment créer une application Nuxt.js. Avant de nous plonger dedans, explorons quelques-uns des quelques concepts essentiels au développement d’une application Nuxt.js.

Création d’une application Nuxt.js

Créer un nouveau projet est facile et va droit au but. Vous pouvez créer un projet avec différentes approches comme indiqué dans la documentation officielle, mais l’approche la plus préférée et recommandée est l’utilisation de CLI.

Pour créer une nouvelle application à l’aide de CLI, assurez-vous que npx est installé (npx est livré par défaut lorsque vous installez yarn ou npm 5.2.0 ci-dessus).

Ensuite, saisissez la commande suivante dans le dossier où vous voulez placer votre projet :

npx create-nuxt-app 
cd 
npm run dev

Assurez-vous de remplacer le nom du projet par le nom réel de votre projet.

Comprendre la structure des dossiers de Nuxt.js

Lorsque vous échafaudez une nouvelle application en utilisant l’une des différentes approches d’installation dans la documentation officielle, vous vous retrouvez avec divers fichiers et dossiers générés par le CLI. Ces fichiers et dossiers sont essentiels et nécessitent que certains d’entre eux restent inchangés sans configuration supplémentaire.

Nous allons examiner la structure des dossiers, discuter de chaque fichier et dossier, et connaître leur importance.

Structure du dossier Nuxt.js nouvellement créé.
Structure du dossier Nuxt.js nouvellement créé.

1. .nuxt

Le répertoire .nuxt est caché et généré lorsque vous démarrez votre serveur de développement, et il est appelé build directory. Ce répertoire contient les fichiers ou artefacts générés lors de l’exécution de la commande npm run build.

Vous pouvez modifier les fichiers de ce répertoire uniquement à des fins de débogage, car les fichiers seront à nouveau générés automatiquement lorsque vous exécuterez la commande dev ou build.

2. Assets

Le dossier assets contient toutes vos ressources non compilées tels que les images, les polices, les fichiers SASS et Stylus. Webpack compilera tout fichier inclus dans ce répertoire pendant le processus de rendu.

3. Components

Le répertoire components est similaire au répertoire components de Vue.js, où sont stockés tous vos composants Vue. Les composants sont les fichiers qui constituent les différentes parties de vos pages et peuvent être réutilisés et importés dans vos pages, mises en page et autres composants également.

4. Layouts

Le dossier layouts stocke la mise en page de votre application et est très utile pour séparer les différentes structures de votre application pour les utilisateurs authentifiés ou les utilisateurs invités.

Vous pouvez créer de nombreuses mises en page pour correspondre à la structure de votre application. Parfois, vous pouvez souhaiter que certaines pages de votre site web aient des colonnes latérales, des en-têtes, des pieds de page, etc. différents. Ces éléments et bien d’autres sont structurés à l’aide des fichiers de mise en page stockés dans le dossier layouts.

5. Middleware

Les middlewares sont des fonctions personnalisées qui peuvent être exécutées avant le rendu d’une page ou d’un groupe de pages (layout). Ils peuvent être définis et stockés dans le dossier middlewares de Nuxt.js.

Les middlewares sont très pratiques lorsque vous créez un site web réservé aux membres. Si vous souhaitez restreindre l’accès à certaines pages, vous pouvez configurer un middleware pour vérifier si un utilisateur est connecté ou non.

Dans Nuxt.js, les intergiciels fonctionnent de la même manière que les intergiciels dans n’importe quel framework de programmation backend comme ExpressJS, Laravel, etc. Il y a trois types différents d’intergiciels, à savoir : les intergiciels nommés, anonymes et de routeur.

6. Pages

Le répertoire pages est la base du système de routage de Nuxt.js car il lit tous les fichiers .vue à l’intérieur de ce répertoire et crée automatiquement la configuration du routeur.

Le répertoire pages contient les vues et les routes de votre application, et chaque composant de page est également un composant Vue standard.

Pourtant, Nuxt.js le traite comme une route en ajoutant des attributs et des fonctions spéciales pour rendre le développement de votre application universelle aussi facile que possible.

7. Plugins

Le répertoire plugins contient les codes JavaScript que vous souhaitez exécuter avant d’instancier l’application Vue.js racine. C’est l’endroit pour ajouter des extensions Vue et injecter des fonctions ou des constantes.

Dans Nuxt.js, au lieu d’utiliser la fonction Vue.use(), il vous suffit de créer un nouveau fichier dans le dossier plugins et d’injecter votre extension Vue dans l’instance Vue à l’aide du fichier nuxt.config.js.

8. Static

Le dossier static contient tous les fichiers statiques de votre projet qui ne seront probablement pas modifiés ou qui doivent être rendus sans aucune compilation.

Tous les fichiers inclus dans le répertoire static seront automatiquement servis par Nuxt.js et accessibles via l’URL racine de votre projet.

Ce répertoire est excellent pour les fichiers tels que favicon, robots.txt, etc.

9. Store

Le répertoire store contient tous les fichiers de votre stock Vuex, et il est divisé en modules par défaut.

Le stock Vuex est livré dès l’installation mais est désactivé par défaut. Vous devez activer le stock en créant un fichier index.js dans le répertoire store.

Un stock Vuex est nécessaire lors de la création et de la gestion d’un projet d’entreprise. C’est pourquoi Nuxt.js est livré préconstruit avec le stock Vuex et est configuré pour s’adapter au développement d’applications de niveau entreprise.

Pages Nuxt.js et système de routage

Nuxt.js rend le système de routage aussi simple que la création de répertoires et de fichiers dans le répertoire pages. Il génère automatiquement un fichier de routage basé sur les fichiers et la structure des dossiers de ce répertoire.

Par exemple, si vous avez un fichier about.vue dans le répertoire pages, il convertira automatiquement la route, et vous pourrez ensuite visiter la route sur votre navigateur pour voir le contenu de la page «  À propos ».

Ce système de routage vous permet également de définir trois itinéraires différents en créant uniquement des fichiers et des dossiers. Explorons ces types de route plus en détail.

1. Routage de base

Le routage de base correspond aux routes qui ne nécessitent aucune configuration supplémentaire pour fonctionner. Il s’agit du type de routage le plus simple et peut être aussi simple que /about, /contact, etc.

Pour créer un système de routage de base, vous pouvez structurer votre répertoire de pages comme ci-dessous :

pages/
--| services.vue
--| contact.vue
--| index.vue

Nuxt.js générera automatiquement un fichier de routage en utilisant les fichiers que vous avez ajoutés dans le répertoire des pages :

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: ‘services’,
      path: '/services’,
      component: 'pages/services’
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
  ]
}

Maintenant tous nos fichiers sont soigneusement structurés et automatiquement routés.

2. Routage imbriqué

Les routes imbriquées sont des routes qui sont créées à l’intérieur d’une route parent. Les routes imbriquées sont utilisées pour créer plusieurs niveaux de routage profond.

Pour créer des routes imbriquées, créez un dossier parent et placez tous les fichiers d’itinéraire dans ce dossier.

Essayons de créer un routage imbriqué :

pages/
 --| dashboard/
 -----| user.vue
 -----| settings.vue
 --| dashboard.vue
 --| services.vue
 --| contact.vue
 --| index.vue

Dans la structure de dossiers ci-dessus, nous avons créé un nouveau fichier et un nouveau dossier portant le même nom que dashboard, puis nous avons ajouté les fichiers user.vue et settings.vue comme enfants du dossier dashboard.

Cette structure de dossier simple va générer un routeur avec des routes similaires à celle ci-dessous :

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'services',
      path: '/services',
      component: 'pages/services'
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
    {
      name: 'dashboard',
      path: '/dashboard',
      component: 'pages/dashboard.vue',
      children: [
        {
          name: 'dashboard-user',
          path: '/dashboard/user',
          component: 'pages/dashboard/user.vue'
        },
        {
          name: 'dashboard-settings',
          path: '/dashboard/settings',
          component: 'pages/dashboard/settings.vue'
        }
      ]
    }
  ]
}

Les routes imbriquées sont un peu lourdes à créer dans Vue.js, surtout si vous devez en créer beaucoup comme vous pouvez le voir dans l’exemple de code ci-dessus, mais Nuxt.js l’a rendu simple et facile en ne créant que des fichiers Vue dans un dossier imbriqué.

3. Routage dynamique

Les routes dynamiques sont créées avec des routes inconnues, soit parce qu’elles dépendent d’un appel API, soit parce que vous ne voulez pas créer la page à plusieurs reprises. Ce sont des routes qui sont définies à partir d’une variable, soit un nom, un numéro ou un ID récupéré à partir des données du client sur l’application.

C’est utile lorsque vous créez une application d’actualités par exemple, où vous ne connaissez pas l’ID ou le slug de l’article sur lequel l’utilisateur va cliquer pour le lire. Mais avec la route dynamique, vous pouvez récupérer l’ID/le slug de l’article et rendre l’article correct avec l’ID/le slug.

Pour créer une route dynamique, vous ajoutez un underscore au nom du fichier ou du répertoire .vue. Vous pouvez nommer le fichier ou le répertoire du nom de votre choix, mais un underscore doit être attaché pour le rendre dynamique.

Par exemple, si vous définissez un fichier _slug.vue dans le répertoire des pages, vous pouvez accéder à la valeur en utilisant l’objet params.slug. Nous allons montrer à l’aide d’un exemple comment créer une route dynamique :

pages/
--|user/
-----| index.vue
-----| about.vue
-----| _routeName
-------| index.vue
-------| info.vue
--| dashboard/
-----| user.vue
-----| settings.vue
--| dashboard.vue
--| services.vue
--| _id.vue
--| contact.vue
--| index.vue

L’ajout de l’underscore à _id et _routeName créera une route dynamique pour la page avec ID param, ainsi qu’une route parent avec une chaîne param avec les routes enfants ci-dessus. Cette structure de page va générer un routeur avec les routes suivantes dans le fichier :

   {
      name: 'work',
      path: '/work',
      component: 'pages/work'
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
    {
      name: 'id',
      path: '/:id',
      component: 'pages/_id.vue'
    }
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-about',
      path: '/user/about',
      component: 'pages/user/about.vue'
    },
    {
      name: 'user-routeName',
      path: '/user/:routeName',
      component: 'pages/user/_routeName/index.vue'
    },
    {
      name: 'user-routeName-info',
      path: '/user/:routeName/info',
      component: 'pages/user/route.vue'
    },
    {
      name: 'dashboard',
      path: '/dashboard',
      component: 'pages/dashboard.vue',
      children: [
        {
          name: 'dashboard-user',
          path: '/dashboard/user',
          component: 'pages/dashboard/user.vue'
        },
        {
          name: 'dashboard-settings',
          path: '/dashboard/settings',
          component: 'pages/dashboard/settings.vue'
        }
      ]
    }
  ]
}

Maintenant que nous avons exploré les différents systèmes de routage intégrés au cadre Nuxt.js, apprenons à créer et à gérer les stocks Vuex.

Utilisation des stocks Vuex dans Nuxt.js

Nuxt.js résout un problème majeur de structure Vue en rationalisant la façon dont Vuex est géré lors de la construction d’un projet d’entreprise. Le dossier store est automatiquement construit lors de la création d’une nouvelle application.

Vous pouvez activer le stock Vuex en créant un fichier index.js à l’intérieur du dossier store. Grâce à cette simple amélioration, le magasin Vuex est désormais structuré et modulé selon les meilleures pratiques décrites dans la documentation officielle de Vuex, ce qui encourage le développement d’applications à grande échelle.

Votre fichier index.js devrait contenir la structure suivante pour correspondre à la façon dont Nuxt.js structure votre stock Vuex. Jetons un coup d’œil :

export const state = () => ({
  
})
export const getters = {

}
export const mutations = {
  
}
export const actions = {
  
}

Nuxt.js vous permet d’utiliser l’approche « split-by-feature » dans votre application à grande échelle. Avec cette approche, vous créez différents fichiers Vuex store pour correspondre aux fonctionnalités que vous avez dans vos applications. Par exemple, si votre application possède des fonctionnalités d’utilisateurs, de messages et de commentaires, vous pouvez créer ces différents fichiers tels que users.js, posts.js, et comments.js dans votre répertoire store.

Cette méthode permet d’accéder facilement à un fichier de stock particulier en fonction de la fonctionnalité de l’application, transformant le processus fastidieux de localisation et de mise à jour des données en une promenade de santé sans effort.

Résumé

Nuxt.js est un framework SSR et Frontend Vue généré statiquement très populaire. Il ne résout pas seulement le problème de la configuration et de la mise en place de SSR dans les applications Vue – il stimule également le développement d’applications d’entreprise en adhérant aux meilleures pratiques de structuration et d’architecture des applications Vue à grande échelle.

Ce guide a exploré tout ce que vous devez savoir sur Nuxt.js, y compris ce que vous pouvez construire avec. Nous avons abordé les pages statiques, les applications mono-pages (SPA) et les applications universelles, ainsi que la manière de les développer à l’aide de Nuxt.js.

Vous avez maintenant vu par vous-même à quel point il peut être facile et avantageux de choisir Nuxt.js pour votre prochain projet de grande entreprise. Faites-nous savoir dans la section des commentaires ce que vous allez construire avec ces nouveaux super-pouvoirs !