Nuxt.js : le framework qui rend la vie facile
Nuxt.js : le framework qui rend la vie facile
Nous avons découvert dans un précédent article, Vue.js : le petit « nouveau », les différentes fonctionnalités proposées par Vue.js. Nous avons également vu qu’il nous restait quand même à gérer webpack, le routing, le server-side rendering, et beaucoup d’autres éléments.
Son principal but est de faire le rendu d’interface utilisateur (« UI ») en faisant abstraction de la distribution entre le client et le serveur.
Nuxt.js
Dans plusieurs de ses présentations, Nuxt.js souligne sa volonté d’offrir aux développeurs la possibilité de se concentrer sur le développement de l’application et moins sur la configuration (webpack, …).
Présentation de Nuxt.js
Nuxt.js est un framework permettant de créer des applications Vue.js universelles.
Les applications universelles permettent un rendu de la page côté serveur (SSR) puis un rendu en SPA depuis le client. Ceci permet de :
- Améliorer le SEO, en permettant aux crawlers d’avoir du contenu pré-rendu sur toutes les pages
- Améliorer les performances sur les mobiles et les appareils peu puissants
- Charger la première page plus rapidement
La gestion du Server Side Rendering constitue la principale raison pour laquelle Nuxt.js est si populaire.
Pour en savoir plus, lisez notre article SSR avec Nuxt.js.
Nuxt.js gère tout pour nous ! ou presque …
Tout d’abord, commençons par la bonne nouvelle : Nuxt.js gère webpack pour nous.
Webpack
Nuxt.js gère une grande partie de la configuration de webpack pour nous :
- le code splitting : chaque route générée statiquement est associée uniquement à la portion de code qui la concerne
- la minification et l’empaquetage des fichiers .js et .css
- le rechargement à chaud (hot reload)
- la génération des fichiers statiques
- la transpilation ES6/ES7 grâce à babel-loader
- les préprocesseurs : Sass, Less, Stylus
- l’écriture de fichiers “.vue” grâce à vue-loader
Structure du projet
Nuxt.js, comme tous les frameworks, structure très bien le projet. Nous avons les dossiers suivants :
- components : contient les composants Vue.js
- layout : contient les mises en pages
- pages : contient les vues et les routes de l’application
- store : contient les fichiers de store Vuex (optionnel)
- assets: contient les ressources du projet qui doivent être traitées par webpack
- static: contient les ressources statiques du projet comme les images, qui ne nécessitent pas un traitement de webpack
N.B: Les fichiers de ressources comme les images sont gérés par Nuxt.js, et seront automatiquement servis par Nuxt et accessibles via la racine du projet.
Gestion des routes
Les routes sont générées en fonction de l’arborescence dans le dossier /pages.
Voici un exemple de routage avec Nuxt.js en live coding :
Conclusion
Les points forts de Nuxt.js :
- Le serveur side rendering qui est géré pour nous (gain de temps et projet plus maintenable)
- Une excellente structure pour le projet qui améliore sa maintenabilité
- La gestion des configuration par Nuxt.js (webpack, génération de routes, etc …) permet de se concentrer sur le développement de l’application plutôt que sur la configuration
- La gestion des ressources par Nuxt.js (images, css, …) qui est disponible dans le code via la racine du projet
Vous l’aurez compris, Nuxt.js apporte un gain de temps et de simplicité plutôt significatif dans la réalisation de projets frontend.
