Une “Vue” plus nette grâce à Nuxt.js

Neoxia a fait le choix, depuis quelques années déjà, d’intégrer Vue.js parmi les frameworks proposés comme solution au développement d’applications web. Cet outil bénéficie non seulement d’une prise en main très simple et est adaptable à des besoins très différents, mais surtout d’une stabilité croissante grâce à sa communauté très active et la sortie fin 2019 d’une version 3.

Un des grands avantages de Vue.js est qu’il peut être intégré directement dans des projets existants et écrits en utilisant d’anciennes solutions. Vue.js facilite alors la migration ou l’ajout de nouvelles fonctionnalités, mais sans imposer une structure complexe et la compilation de code par des outils tiers, et donc sans devoir réécrire entièrement le projet.

Cette maniabilité représente pourtant un désavantage lors du choix de développer une application web from scratch avec Vue.js. Les différents approches que chacun peut avoir, les librairies structurantes à utiliser, le nommage des différents éléments qui structurent l’application, peuvent être source de confusion et de duplication de code lors du travail en équipe, et donc de perte de temps pour instaurer des règles communes.

L’arrivée de Nuxt.js

C’est à cause de cette problématique que chez Neoxia, nous avons décidé d’adopter Nuxt.js comme base de travail pour nos projets Vue.js partant de zéro. Ce fut par exemple le cas pour le développement d’une interface utilisateur pour la gestion des interventions sur le réseau de gaz de l’entreprise Teréga.

En travail d’équipe, Nuxt a su répondre au besoin de standardiser la façon de travailler de chacun·e. Cette problématique était bien adressée par Angular grâce à la structure solide et immuable du framework. Dans le cas de Vue.js, plusieurs implémentations sont possibles :

utilisation optionnelle de webpack et des composants monofichiers, choix des librairies structurantes comme le client HTTP à utiliser (axios, vue-resource…), l’emplacement des fichiers selon leur domaine d’appartenance, une logique commune et des termes conformes… Dans le cas de Nuxt ces choix sont imposés, permettant donc de démarrer rapidement le développement d’un projet sur une base claire.

La prise en main du framework ne comporte d’ailleurs aucune connaissance complémentaire qu’on n’aurait pas déjà acquise lors du développement d’une web-app standard avec Vuejs.

En bref, Nuxt.js est donc un framework de Vue.js qui permet de :

• démarrer un projet très rapidement ;
• intégrer les outils de développement incontournables ;
• avoir une structure claire ;
• soigner le référencement ;
• alléger l’application.

Nuxt.js, comment ça marche ?

D’une manière générale, Nuxt permet de standardiser le travail lors de l’utilisation du framework Vue.js. Voici par exemple la structure des dossiers proposées par Nuxt.js lors de la mise en place d’un projet :

Les experts de Vue.js remarqueront qu’en plus des dossiers généralement présents au sein d’un projet, d’autres sont proposés pour aider à différencier les domaines de l’application. Parmi ceux-ci, les plus importants sont :

• le dossier pages, qui permet d’autogénérer une configuration vue-router selon les dossiers et fichiers contenus à l’intérieur, et leur niveau d’imbrication.
• le dossier store, qui permet de stocker les différents modules Vuex.
• le dossier middleware pour stocker les middlewares appelés avant que le process de rendu débute.
• enfin, le fichier nuxt.config.js permettant de configurer le framework et ses modules, les meta tags et script externes, webpack.

Une des fonctionnalités qui a fait le succès de Nuxt est certainement le mode “universal”, paramétrable depuis le fichier de configuration. Ce mode permet d’activer le SSR (Server side rendering) afin que le contenu soit desservi statiquement depuis le serveur, et donc améliorer les performances côté client. Mais surtout, cette génération du code HTML côté serveur favorise l’indexation par les moteurs de recherche et donc le référencement des sites. Nuxt permet donc, grâce au mode “universal”, d’avoir un serveur HTTP avec la possibilité d’utiliser des frameworks pour pouvoir implémenter une logique backend. D’ailleurs, une liste de frameworks est proposée à la mise en place du projet.

De plus en plus de modules sont également intégrables dans le framework. Parmi eux, on retrouve le module Axios et le module Auth, qui nous permettent très rapidement de démarrer une application dépendant d’une API, et de mettre en place un système d’authentification grâce à une simple configuration. Une liste plus exhaustive d’outils est disponible à cette adresse. Nuxt supporte aussi l’intégration d’un projet tout en utilisant typescript.

Bien d’autres fonctionnalités du framework peuvent être découvertes grâce à la documentation officielle de Nuxt.js, qui pour chaque fonctionnalité propose trois manières d’apprendre : le guide, l’API, et une série d’exemples. C’est d’ailleurs l’un des aspects qui contribue à rendre la prise en main de Nuxt aussi facile et agréable.

Depuis l’introduction de Nuxt.js chez Neoxia, nous avons pu constater des vraies améliorations au niveau de la collaboration inter-développeurs. Même sans recourir forcément au mode “universal”, l’utilisation de ce framework est devenue indispensable car elle représente un argument fort face aux besoins de nos clients. En effet, la solidité et la fiabilité de cet outil nous permettent d’assurer une mise en place rapide, un travail efficace, et un code plus propre, permettant ainsi de renforcer les échanges entre les collaborateurs et d’accélérer l’onboarding.