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 !

Tous
Business
Jamstack
NodeJS
React Native
Développement Web & Mobile
Flutter
Mobile
Python
Strapi
Wordpress
UX/UI Design
Headless
Process business
Outils

Articles de la même catégorie

Refonte de site internet : améliorer son tunnel de conversion

5 conseils pour augmenter son taux de conversion lors de la refonte de votre site internet

Découvrez nos 5 conseils pratiques à appliquer lors de la refonte de votre site web pour augmenter votre taux de conversion !...
Express JS

Express JS : tout ce que vous devez savoir

Découvrez Express JS, le framework basé sur Node.js pour construire des backend puissants....
Angular vs React : que choisir ?

Angular vs React : que choisir pour votre entreprise ?

Vous hésitez entre Angular vs React pour développer votre site web d'entreprise ? Découvrez notre comparatif !...