NUXT.JS  : Faites passer votre application au niveau supérieur !

Les solutions technologiques actuelles nous permettent de créer des sites web adossés à des frameworks qui ont pour principal avantage de nous faire gagner beaucoup de temps. 

C’est le cas par exemple des sites Web développés avec des frameworks tels que Vue, React.js ou Angular. Tous ont la particularité de présenter un coût de prise en charge  du serveur inférieur. Mais aussi, malheureusement, un inconvénient de taille. Celui du  rendu des pages côté client, qui ont souvent un problème d’indexation dans les moteurs de recherche.

La bonne nouvelle est que ce problème ne sera bientôt plus qu’un mauvais souvenir. Pour vous en débarrasser, il suffit d’utiliser Nuxt !

Qu’est-ce que Nuxt.JS ?

Nuxt.js est un framework pour créer des applications Vue.js. Son principal avantage est le rendu de l’interface utilisateur, mais aussi de faire abstraction de la distribution client/serveur. 

Pourquoi utiliser Nuxt.js pour le développement d'application

En tant que framework, il force la structure de fichiers spécifiée. Une particularité qui vous aidera notamment dans le développement de votre application, notamment au niveau des  données asynchrones, middleware. Mais aussi des mises en page, pages et routage ou encore avec le rendu évolutif de votre application. 

En quoi Nuxt.JS peut booster le référencement (SEO) de votre application ?

Nuxt.js booste le référencement, et donc la visibilité de votre application de trois manières  : 

  • Le Rendu serveur (SSR universel) ;
  • Les Demandes à page unique (SPA) ; 
  • La Génération statique (pré-rendu).

Nuxt.Js et la structure des fichiers de projet

La structure des fichiers d’application Nuxt.js est créée de manière spécifique. Elle vous fournit un excellent point de départ, que vous projetiez de développer une petite ou grande application : 

  • Actifs : contient vos actifs non compilés, des fichiers SCSS ou JavaScript par exemple ;
  • composants : contient vos composants Vue.js. Nuxt.js ne suralimente pas la méthode des données sur ces composants ; 
  • mises en page : ce fichier regroupe vos mises en page d’application. Chaque fichier de mise en page contient un en-tête et un pied de page ; 
  • pages : contient vos Vues et Routes. Nuxt lit tous les fichiers .vue dans ce répertoire et crée la liste des routeurs d’application.
  • middleware : ce fichier rassemble tous les middlewares avec des fonctions personnalisées qui peuvent être exécutées avant le rendu d’une page ou d’un groupe de pages (mises en page) ; 
  • plugins : contient tous les  plugins Vue que vous souhaitez exécuter dans votre application ; 
  • statique : soit tous les fichiers statiques (par exemple les fichiers images, txt, etc.) ; 
  • store : ici, vous devez créer votre magasin Vuex sous le nom index.js
  • nuxt.config.js : le fichier contient la configuration personnalisée de votre application Nuxt.js.

Développez votre première application Nuxt.JS

Pour développer votre application avec Nuxt.Js, vous allez devoir suivre plusieurs étapes. 

1. Utiliser l’outil create-next-app.

Pour utiliser l’outil Create-nuxt-app, vous devez d’abord installer npx. Npx est livré par défaut avec NPM 5.2.0. Vous pouvez aussi utiliser Yarn. 

Après avoir donné un nom et décrit votre projet Create Nuxt App vous posera quelques questions : 

2. Choisir votre framework intégré côté serveur

Nuxt.Js vous donne le choix parmi plusieurs frameworks intégrés côté serveur. Et notamment : 

  • None (serveur nuxt par défaut) ; 
  • Express ; 
  • Koa ; 
  • Adonis ; 
  • hapi ; 
  • feathers ; 
  • micro.

Dans notre cas, nous avons choisi l’option “None”. 

3. Choisir le cadre du kit d’interface utilisateur

Ensuite, il vous sera demandé de choisir parmi plusieurs cadres de kit d’interface utilisateur. Faites en fonction de vos préférences. Ou n’en prenez aucun pour votre kit personnalisé à partir de zéro.

  • None (à partir de zéro) ; 
  • bootstrap ; 
  • vuetify ; 
  • bulma ; 
  • tailwind ; 
  • element-ui ;
  • buefy.

4. Choisir votre rendu

La quatrième étape consiste à choisir le rendu que vous souhaitez utiliser. Vous aurez le choix entre : 

  • Universel ;
  • SPA (application à page unique). 

Dans notre cas, nous utiliserons le mode de rendu Universel.

5. Choisir les options Nuxt.Js

Pour la prochaine étape dû développement de votre application Nuxt.Js, il vous sera demandé si vous souhaitez inclure dans votre projet :

6. Choisir le mode d’installation

Dans la dernière étape de l’installation de Nuxt.Js, vous devrez choisir le mode d’installation : NPM ou YARN.

Après l’installation, vous n’avez qu’à vous déplacer dans le dossier du projet et taper la commande pour exécuter votre premier projet Nuxt.js. Ensuite, vous verrez les chargeurs créer des environnements serveur et client :

Si tout s’est bien passé, vous devriez voir s’afficher un écran comme ci-dessous :

Conseils pour utiliser Nuxt.js

Cliquez ensuite sur le lien et vous devriez voir votre première page Web rendue côté serveur. 

Vous pouvez vérifier en cliquant avec le bouton droit sur le site Web et en cochant Afficher la source de la page. L’image ci-dessous présente la vue de la source d’une page sur Nuxt.JS

Présentation de Nuxt

Le mot de la fin 

Comme vous pouvez le constater, démarrer un projet en utilisant Nuxt.js est très simple et les avantages de son utilisation sont considérables. Si vous avez besoin d’un peu d’aide pour vous lancer sur votre premier projet, n’hésitez pas à nous en parler ! Notre équipe est là pour vous aider à le concrétiser, et le faire passer au niveau supérieur !

Vous avez un projet en tête ?

Discutons-en ! 

Découvrez nos autres articles de blog

Loading...