Une application mobile qui cartonne c’est bien. Mais une application avec un back-office simple et rapide à développer, c’est encore mieux ! Pour Mobiquiz, une plateforme mobile dédiée aux quiz créée par Mobiapps, il fallait un outil performant pour gérer les utilisateurs, les quiz, les entreprises et les rôles de chacun.
Ce projet a impliqué plusieurs équipes, chacune spécialisée dans un domaine :
- mobile natif : développement du jeu mobile
- backend : gestion des données et des API
- frontend : création du backoffice (c’est de cette équipe dont nous parlerons ici)
Le défi de l’équipe Frontend ? Concevoir une interface intuitive pour les administrateurs, tout en développant rapidement grâce à des technologies modernes. C’est là que Nuxt.js entre en jeu. Sa structure claire, sa modularité et son intégration avec des bibliothèques de composants dédiées en font un candidat intéressant. Dans cet article, vous découvrirez la démarche, la réalisation et les résultats qui ont abouti à la création de la partie gestion de l’application.
1. Pourquoi Nuxt.js est adapté à ce projet ?
Avec tous les frameworks JS existants, beaucoup pourront répondre à la problématique de transformer un projet simple en une application concrète. Nuxt.js se distingue par sa capacité à rendre le développement beaucoup plus structuré, et sympa à prendre en main. Il tire ses avantages de VueJs et corrige certains de ses points faibles, notamment grâce à sa structure de projet précise et prédéfinie ou les imports automatiques des composants. On suit une approche basée sur des conventions plutôt que sur une configuration complexe. Cela nous a permis de nous concentrer sur les fonctionnalités essentielles et le contenu, sans être noyés dans des documentations techniques.
De plus, Nuxt.js facilite la gestion des états avec son "useState" et offre la possibilité de choisir son propre gestionnaire d'état (comme Pinia ). Il propose également une configuration des routes dynamiques basée sur les fichiers, gérée nativement avec vue-router.
Egalement, pour une gestion avancée, comme gérer les états asynchrone, Nuxt propose des Hooks, ‘asyncData’ ou également comme pour Pinia de pouvoir utiliser des outils externes, (TanStack par exemple).
Il offre des fonctionnalités comme le rendu côté serveur (SSR), qui génère des pages HTML au serveur avant leur envoi au client, et le mode statique, améliorant ainsi les performances et l’expérience utilisateur. Tout cela sans nécessiter de connaissances approfondies dès le départ, ce qui en fait un outil de choix pour monter en compétence rapidement tout en travaillant sur un projet concret, comme pour ce quiz.
2 - Framework structuré
2.1 - Nuxt UI
Nuxt UI est une bibliothèque qui permet d’accélérer le développement d’interfaces grâce à des composants prêts à l’emploi mais aussi personnalisables.
Les composants peuvent être créés et étendus facilement tout en conservant la liaison des données via v-model, ce qui permet de respecter les directives d’implémentation.
Un composant est structuré à l’aide de templates ou de slots. La modification des templates est possible avec une bonne compréhension de leur structure ; il est nécessaire de bien lire la documentation pour identifier le template ou le slot à modifier.
De manière générale, Nuxt UI combine simplicité et flexibilité. Nous avons souhaité réaliser notre propre bibliothèque de composants UI mais cela n’était pas gratifiant par apport aux besoin du projet. Il est tout à fait possible de créer sa propre intégration et de l’importer dans son projet.
2.2 - State management
Nuxt fournit le composable useState, une solution intuitive pour créer un état partagé, réactif et optimisé pour le rendu côté serveur (SSR).
Contrairement à ref, useState préserve sa valeur après le rendu côté serveur, tout en permettant le partage d'état entre les composants sans developpment supplémentaire. Cette simplicité en fait un outil idéal pour gérer des états légers ou des fonctionnalités locales tout en tirant parti des avantages de l'écosystème Nuxt.
Exemple d’utilisation de useState :
Pour des besoins plus avancés, Nuxt encourage l'utilisation d'outils spécialisés tels que Pinia, ce qu’on a utilisé pour le projet ou TanStack qui était intéressant également. Ces outils s’intègrent parfaitement dans l’environnement Nuxt, permettant aux développeurs de choisir l’approche la mieux adaptée à leurs projets, qu’il s’agisse d’applications interactives simples ou de systèmes complexes.
Exemple d’utilisation de Pinia pour les states (./application.vue) :
./siteweb.ts (pour l’exemple avec Pinia) :
2.3 - Routing
Nuxt intègre un système de routing basé sur le système de fichiers, où chaque fichier Vue dans le répertoire pages correspond automatiquement à une URL. Cette fonctionnalité repose sur vue-router et utilise des conventions de dénomination. En simplifiant la configuration des routes, ce système permet de structurer efficacement une application sans effort manuel.
Exemple de structure :
.png)
En plus de cette automatisation, il utilise les importations dynamiques pour chaque page, activant ainsi le fractionnement de code. Cela garantit que seule la quantité minimale de JavaScript nécessaire est chargée pour chaque route demandée, optimisant ainsi les performances et améliorant l’expérience utilisateur.
L’intégration d’un guard est le petit plus que nous avons apprécié. À l’aide de la fonction defineNuxtRouteMiddleware , nous avons facilement créé un guard qui permet de rediriger l’utilisateur vers la page de connexion lorsqu’il n’est pas authentifié. Une fois référencée dans le fichier principal nuxt.config.ts l’intégration est active sur toute les routes.
2.4 Gestion des langues
Nous avons adopté une gestion des langues généralisée. Notre objectif principal était de supporter les traductions en anglais et en français, tout en offrant à l’utilisateur un changement de langue simple, notamment grâce à une modification automatique des URLs selon la langue sélectionnée.
Nous avons utilisé la librairie @nuxtjs/i18n. Une fois les fichiers de traduction configurés et la librairie référencée dans le fichier principal nuxt.config.ts, son utilisation dans les pages devient intuitive.
Grâce à la variable $t('key'), il est possible de référencer les traductions. Cette clé peut avoir une forme composée ('core.action.validate') ou simple ('welcome').La librairie propose également des méthodes comme useSwitchLocalePath, permettant de changer la langue en temps réel, sans recharger la page. Cette fonctionnalité rend le processus transparent pour l'utilisateur et facile à intégrer.
La modification des URLs selon la langue choisie était un aspect essentiel de notre implémentation. Chaque fichier .vue représentant une page a été configuré à l’aide du code ci-dessous pour déclarer des routes en anglais et en français, ce qui permet d'accéder à la même page avec deux URLs distinctes :
- **https://mobiquiz/help** → Traduction des textes en anglais
- **https://mobiquiz/aide** → Traduction des textes en français
Cette configuration garantit une navigation fluide et une expérience utilisateur optimisée, quelle que soit la langue sélectionnée.
3 - Retour expérience
Nuxt.js s’est révélé être un choix stratégique pour ce projet, permettant à notre équipe issue du mobile d’adapter rapidement ses compétences au web. Grâce à son approche auto-configurée, il a offert un gain de temps précieux en évitant une configuration complexe, tout en laissant la possibilité d’ajustements manuels pour répondre aux besoins spécifiques. Sa documentation détaillée et sa communauté active ont également facilité la montée en compétence et l’intégration de composants adaptés.
Bien que l’intégration de certains modules puisse parfois nécessiter des ajustements, l’ensemble du projet a pu être développé efficacement, avec des résultats visibles rapidement. Cette expérience confirme que Nuxt.js est une solution idéale pour des développements web structurés et performants. À l’avenir, il sera intéressant d’explorer encore plus ses capacités, notamment sur des projets à plus grande échelle ou intégrant des technologies émergentes comme l’IA.
Samuel Ebebenge - Ingénieur études & Développeur Confirmé
Clément Marchais - Ingénieur & Développeur Confirmé
Pacôme Dhiser - Alternant Développeur Mobile