Nuxt.Js : Tour d’horizon

01/10/2019

Aucun commentaire

Alors même que je développais un super outil de planification de projets , je me suis rendu compte que mon application devenait trop conséquente. La multiplication des composants, la gestion du store… autant d’éléments qui venaient alourdir mon code. J’ai donc pris les choses en main histoire de structurer tout ça !  C’est en cherchant sur le Web que mon attention a été retenue par Nuxt.JS qui, comme vous allez le découvrir, présente beaucoup d’avantages.

Nuxt.Js c’est quoi ?

Il s’agit en fait d’un Framework Vuejs qui accélère vos développements de composant Vue. On peut dire que c’est l’équivalent d’un Symfony ou d’un Laravel par exemple pour le développement PHP. C’est un excellent point de départ pour le démarrage d’un nouveau projet car le framework est très flexible et très bien structuré.

Structure des dossiers

  • components : ce dossier contient vos composants Vue
  • layouts: ce dossier contient les templates de mise en page
  • pages: ce dossier contient les pages de votre application
  • store : ce dossier contient les fichiers Vuex Store
  • middleware: ce dossier est particulièrement intéressant si vous avez besoin d’exécuter une fonction avant le rendu des pages
  • plugins: ce dossier contient tous les plugins Javascript avant l’initialisation de Vuejs
  • assets : ce dossier contient les fichiers non-compilés (Sass, Stylus, Less, images, fonts)

Arborescence d’un projet VueJs

Arborescence d’un projet NuxtJs

Applications universelles

Nuxt.Js permet de créer facilement de créer une application universelle. Nous parlons ici d’une application Javascript qui peut être exécutée à la fois côté client et côté serveur. L’utilisation des applications universelles présente de multiples avantages :

  • elles peuvent être indexées par les moteurs de recherche
  • temps de chargement ultra-rapide
  • expérience utilisateur grandement améliorée

Rendu statique

Nuxt permet aussi d’exporter votre application Vuejs en version statique. Vous obtiendrez pour chaque page de votre projet la version HTML de celle-ci. Cela s’apparente presque à une application universelle à la différence près que vous n’avez pas besoin d’un serveur Node pour faire fonctionner votre site statique. Un simple hébergement fera amplement l’affaire 🙂

En résumé

Nuxt.Js possède encore plein d’autres fonctionnalités très intéressantes qui seront traitées lors de mon prochain article sur le blog. En attendant j’espère vous avoir donner envie d’essayer ce framework 🙂