Débuter avec Nuxt

Les développeurs Web créent de nombreuses pages uniques Applications utilisant des frameworks JavaScript (Angular, React, Vue). Les SPA remplissent dynamiquement le contenu de leurs pages en charge ce qui signifie qu'au moment où Google explore leur site, le contenu important doit encore être injecté dans le site. Une partie de ce problème peut être résolue en pré-rendant le contenu de votre application. C'est là qu'interviennent les applications côté serveur, et pour les développeurs de Vuejs, nous pouvons créer des applications côté serveur en utilisant Nuxt.js.

Nous allons supposer que vous ne l'avez pas utilisé auparavant, en tant que tel, il commencera à partir de la base – vous présenter Nuxt.js, sa structure de fichiers et le fonctionnement du routage.

À la fin de ce didacticiel, vous devriez être en mesure de continuer à créer des applications Web de base dans Nuxt.js, et si vous vous demandez comment commencer avec Nuxt.js, cela rendra justice à cela.

Cet article est destiné à ceux qui sont assez familiers avec Vue.js et c'est un concept, pour ceux qui ne connaissent pas Vue.js, pensez à partir du documentation officielle Vuejs et playlist The Net Ninja Vuejs .

Qu'est-ce que Nuxt.js?

D'après leur page officielle :

" Nuxt est un framework progressif basé sur Vue.js pour créer des applications web modernes. Il est basé sur les bibliothèques officielles de Vue.js (vue, vue-router et vuex) et sur de puissants outils de développement (webpack, Babel et PostCSS). L'objectif de Nuxt est de rendre le développement Web puissant et performant avec une grande expérience de développeur à l'esprit. »

Il vous permet de créer trois types d'applications, selon le but auquel il est destiné:

1. Pages générées statiques (pré-rendu)
   Les applications générées statiquement ne nécessitent pas de demandes d'API pour récupérer le contenu des pages, c'est-à-dire que le contenu est déjà inclus dans le fichier HTML. Un exemple de site statique est un site Web de portefeuille ou une page de destination pour un produit.

2. Application à page unique
   La plupart des cadres JavaScript (React, Angular, Emberjs, Vue, etc.) sont des applications à page unique dont le contenu est rempli dynamiquement avec des transitions plus rapides. La plupart des SPA utilisent l'API d'historique HTML5 ou l'emplacement de hachage pour le routage.

3. Applications côté rendu serveur (SSR)
   Le rendu côté serveur est une technique utilisée pour extraire et afficher côté client données sur le serveur pour envoyer une page entièrement rendue au client. C'est une bonne approche pour obtenir un bon référencement pour votre application.

Création de votre première application Nuxt.js

Vous pouvez créer une application Nuxt.js de deux manières:

1. Utilisation de l'outil d'échafaudage create- nuxt-app .
2. À partir de zéro.

Au cas où vous voudriez simplement voir l'application terminée que nous construirions, voici un lien vers le dépôt GitHub .

Dans ce tutoriel, nous nous concentrerions sur l'utilisation de create-nuxt-app alors commençons. Si vous avez installé npx, ouvrez votre terminal et exécutez cette commande:

 $ npx create-nuxt-app nuxt-tutorial-app 

ou

 $ yarn create nuxt-app nuxt-tutorial-app 

Dans le cadre de ce didacticiel, nuxt-tutorial-app est le nom de l'application, mais n'hésitez pas à nommer le vôtre différemment.

Ceci serait suivi d'une liste d'options qui aident à configurer votre application avec ce dont vous pourriez avoir besoin pour le développement.

Voici à quoi ressemble ma configuration:

Pour les besoins de ce didacticiel, nous n'avons pas besoin d'axios, de peluches et de configurations Prettier.

Une fois cela fait, nous exécuterons la commande suivante dans notre terminal:

 $ cd nuxt-tutorial-app
$ npm run dev 

Votre application devrait maintenant être exécutée sur http: // localhost: 3000 et voici ce que vous devriez voir:

À ce stade, votre application est prête pour le développement.

Comprendre la structure des dossiers Nuxt

L'échafaudage de l'application comme nous l'avons fait crée différents fichiers et dossiers sur lesquels nous pouvons commencer à travailler avec. Pour quelqu'un qui n'a pas travaillé avec Nuxt auparavant, cela pourrait vous déséquilibrer. Nous allons donc examiner les dossiers afin de comprendre leur importance.

• Actifs
  Ce dossier est destiné aux fichiers non compilés tels que les images, les fichiers de polices, les fichiers SASS, LESS ou JavaScript. Ajoutons créer un dossier styles et un fichier main.css et copier et coller ce qui suit.

 a {
  décoration de texte: aucune;
  couleur: hériter;
  curseur: pointeur;
}
.entête {
  largeur: 100%;
  largeur max: 500px;
  marge gauche: auto;
  marge-droite: auto;
  hauteur: 60px;
  en haut: 0;
  position: collant;
  couleur de fond: #fff;
  affichage: flex;
  justifier-contenu: espace entre;
  align-items: centre;
}
.logo {
  largeur: 40%;
  largeur max: 200px;
  hauteur: 40px;
}
.logo .NuxtLogo {
  largeur max: 30px;
  marge gauche: 10px;
  hauteur max: 40px;
}
.nav {
  largeur: 60%;
  hauteur: 40px;
  affichage: flex;
  justifier-contenu: espace entre;
  rembourrage à droite: 10 pixels;
  largeur max: 300px;
}
.nav__link {
  largeur: 80px;
  affichage: flex;
  align-items: centre;
  rayon-frontière: 4px;
  justifier-contenu: centre;
  hauteur: 100%;
  bordure: 1px solide # 00c58e;
  curseur: pointeur;
}
.nav__link: actif {
  couleur de fond: # 00c58e;
  bordure: 1px solide # 00c58e;
  couleur: #fff;
  boîte-ombre: 5px 3px 5px 2px # 3f41468c;
}
.Accueil {
  rembourrage-dessus: 30px;
}
.home__heading {
  alignement du texte: centre;
}
.directories {
  affichage: flex;
  dimensionnement de la boîte: border-box;
  rembourrage: 10px;
  largeur max: 1000px;
  marge: 0 auto;
  flex-wrap: wrap;
  justifier-contenu: centre;
}
@media (min-width: 768px) {
  .directories {
    justifier-contenu: espace entre;
  }
}
.directory__container {
  largeur: 100%;
  largeur max: 220px;
  curseur: pointeur;
  rayon-frontière: 4px;
  bordure: 1px solide # 00c58e;
  affichage: flex;
  hauteur: 60px;
  marge: 10px 5px;
  marge droite: 0;
  justifier-contenu: centre;
  align-items: centre;
}
.directory__name {
  alignement du texte: centre;
}
.directory {
  largeur: 100%;
  marge: 50px auto;
  largeur max: 450px;
  rayon-frontière: 4px;
  bordure: 1px solide # 00c58e;
  dimensionnement de la boîte: border-box;
  rembourrage: 10px 0;
}
.directory__info {
  rembourrage à gauche: 10 pixels;
  hauteur de ligne: 22 px;
  rembourrage à droite: 10 pixels;
} 

Les styles ci-dessus seront utilisés dans l'application pour ce que nous allons créer. Comme vous pouvez le voir, nous avons des styles pour la navigation et d'autres aspects que nous connecterons à l'application au fur et à mesure.

• Composants
  Ce dossier est celui que nous connaissons de Vue.js, il contient votre réutilisable

Maintenant, créons notre premier composant et nommez-le navBar.vue et ajoutez-lui le code suivant. Nous voulons que la barre de navigation du site affiche le logo et un lien vers les pages d'accueil et à propos que nous créerons à l'avenir. Cette barre de navigation sera visible à travers l'application. Il utilisera également certains styles que nous avons ajoutés ci-dessus.

La section modèle contient ce qui sera visible par l'utilisateur. Nous avons un élément d'en-tête qui contient notre logo et les liens de navigation. Pour nous permettre de créer un lien vers les pages, nous utilisons nuxt-link qui permet de naviguer entre les pages des composants.

Dans la section de script, nous importons le composant logo à l'aide de ] Nuxt alias @ et l'a déclaré dans notre composant pour être utilisé en l'ajoutant en tant que composant. Cela nous permet de le rendre dans le modèle.

• Disposition
  Ici, nous allons stocker nos dispositions d'application. Cela est particulièrement utile si la conception de votre application nécessite deux dispositions ou plus, par exemple un pour les utilisateurs authentifiés et un autre pour les invités ou les administrateurs. Aux fins de ce didacticiel, nous nous en tiendrons à la disposition par défaut.

Ouvrons notre fichier default.vue et ajoutons notre composant navBar au composant disposition de notre application.

Dans la section modèle, nous avons ajouté notre composant Nav à l'intérieur du conteneur de disposition pour qu'il apparaisse toujours en haut après l'avoir importé dans le fichier et l'avoir déclaré dans la section script. [19659005] La prochaine chose après notre composant Nav est qui indique à Nuxt où rendre tous ses itinéraires.

Ce composant Nav est celui que nous avons créé ci-dessus. En l'ajoutant ici, le composant Nav sera utilisé dans l'application.

• Middleware
  Ce dossier a été créé pour héberger les fichiers JavaScript qui doivent être exécutés avant le rendu des pages. Si vous avez déjà utilisé le garde de navigation Vuejs ce dossier a été créé pour des fichiers comme celui-ci.

• Pages
  Il s'agit d'un autre dossier que les développeurs ayant des antécédents Vuejs ne connaissent pas. Il fonctionne de telle manière que chaque fichier *. Vue est créé en tant qu'itinéraire dans votre application, il sert donc à la fois de vues et de routeur dossier dans le dossier en même temps, nous en parlerons plus dans la section suivante.

• Plugins
  C'est ici que vous stockez les fichiers que vous souhaitez exécuter avant de monter l'application racine Vue.js. Ce n'est pas un dossier requis, il peut donc être supprimé.

• nuxt.config.js
  Ce fichier est utilisé pour configurer votre application, il est généralement pré-rempli en fonction de la configuration lors de la création de votre application. Un fichier nuxt.config.js idéal devrait ressembler à ceci par défaut:

 export default {
  mode: «universel»,
  / *
  ** En-têtes de la page
  * /
  tête: {
    title: process.env.npm_package_name || '',
    méta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    lien: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  / *
  ** Personnalisez la couleur de la barre de progression
  * /
  chargement: {color: '#fff'},
  / *
  ** CSS global
  * /
  css: [
  ],
  / *
  ** Plugins à charger avant de monter l'application
  * /
  plugins: [
  ],
  / *
  ** Nuxt.js dev-modules
  * /
  buildModules: [
  ],
  / *
  ** Modules Nuxt.js
  * /
  modules: [
  ],
  / *
  ** Configurer la configuration
  * /
  construire: {
    / *
    ** Vous pouvez étendre la configuration de webpack ici
    * /
    étendre (config, ctx) {
    }
  }
} 

Chaque fois qu'une modification est apportée à ce fichier, votre application redémarre automatiquement pour refléter les modifications. Voyons ce que signifient les propriétés utilisées dans le fichier.

• Mode
  Type d'application; soit universel ou spa . En sélectionnant universel, vous dites à Nuxt que vous souhaitez que votre application puisse s'exécuter à la fois côté serveur et côté client.
• Head
  Toutes les propriétés par défaut des balises META et le lien favicon trouvé à l'intérieur de la balise head dans votre application se trouve ici. En effet, Nuxt.js n'a pas de fichier par défaut index.html contrairement à Vue.js.
• chargement
  Toutes les applications Nuxt sont fournies avec un composant de chargeur par défaut et le la couleur peut être personnalisée ici.
• css
  Vous devez saisir le lien vers tous vos fichiers CSS globaux afin que votre application puisse en tenir compte lors du montage de l'application. Nous allons y ajouter le lien vers notre fichier css et redémarrer notre application.

  / *
   ** CSS global
   * /
  css: ["~/assets/styles/main.css"]

• plugins
  C'est ici que vous connectez tous les plugins de votre dossier plugins à l'application. Il prend un objet avec des propriétés telles que src qui accepte le chemin du fichier vers le plugin et un mode qui configure comment votre application traite ce plugin; soit en tant que plug-in côté serveur ou plug-in côté client. Par exemple:

 {src: '~ / plugins / universal-plugin.js'}, // pour les plugins serveur et client
{src: '~ / plugins / client-side.js', mode: 'client'}, // pour les plugins client uniquement
{src: '~ / plugins / server-side.js', mode: 'server'}, // pour les plugins côté serveur uniquement 

Ceci est important pour éviter les erreurs côté serveur ou côté client, surtout si votre plugin nécessite quelque chose comme localStorage qui n'est pas disponible côté serveur.

Pour plus d'informations sur le fichier nuxt.config.js consultez le doc officiel .

Nuxt Pages And Routing System

Le dossier pages de votre application Nuxt est utilisé pour configurer les itinéraires de votre application, c'est-à-dire que le nom de votre itinéraire dépend du nom de chaque fichier de ce dossier, par exemple si vous avez un fichier about.vue dans votre fichier de pages, cela signifie que vous avez maintenant un itinéraire / about dans votre application, mais ce n'est pas tout. Que se passe-t-il si vous souhaitez un itinéraire dynamique pour votre application? Ou un itinéraire imbriqué? Comment vous y prenez-vous?

Routes de base

Les routes de base peuvent être classées comme des routes qui ne nécessitent pas de configuration supplémentaire pour fonctionner. Par exemple, un itinéraire direct / work ou un itinéraire / contact . Donc, si votre dossier de pages ressemble à ceci:

 pages /
- | moi/
 ----- | index.vue
 ----- | about.vue
- | work.vue
- | contact.vue
- | index.vue 

Nuxt générerait automatiquement une configuration de routeur qui ressemble à ceci:

 routeur: {
  itinéraires: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'work',
      path: '/work',
      component: 'pages/work'
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
    {
      name: 'me',
      path: '/me',
      component: 'pages/me/index.vue'
    },
    {
      name: 'me-about',
      path: '/me/about',
      component: 'pages/me/about.vue'
    }
  ]
} 

Ces chemins peuvent ensuite être utilisés pour accéder aux composants qui leur sont liés. Vous pouvez voir que le chemin ne contient pas pages . Et Nuxt gère les composants nommés index.vue comme il se doit sans configuration supplémentaire pour cela.

Routes imbriquées

Pour créer une route imbriquée, créez un dossier appelé tableau de bord à l'intérieur du dossier pages . Ce dossier doit contenir tous les fichiers que vous souhaitez y imbriquer. Par exemple, user.vue et settings.vue . Ensuite, à la racine du dossier pages créez un fichier appelé dashboard.vue .

 pages /
 - | moi/
 ----- | index.vue
 ----- | about.vue
 - | tableau de bord/
 ----- | user.vue
 ----- | settings.vue
 - | dashboard.vue
 - | work.vue
 - | contact.vue
 - | index.vue 

Cela générerait automatiquement un routeur avec des routes qui ressemblent à ceci:

 routeur: {
  itinéraires: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'work',
      path: '/work',
      component: 'pages/work'
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
    
    {
      name: 'me',
      path: '/me',
      component: 'pages/me/index.vue'
    },
    {
      name: 'me-about',
      path: '/me/about',
      component: 'pages/me/about.vue'
    },
    {
      name: 'dashboard',
      path: '/dashboard',
      component: 'pages/dashboard.vue',
      children: [
        {
          name: 'dashboard-user',
          path: '/dashboard/user',
          component: 'pages/dashboard/user.vue'
        },
        {
          name: 'dashboard-settings',
          path: '/dashboard/settings',
          component: 'pages/dashboard/settings.vue'
        }
      ]
    }
  ]
} 

Notez que le nom de l'itinéraire suit toujours un modèle régulier:

 nom du dossier + '-' + nom du fichier
 

Avec cela, vous pouvez être sûr que chaque itinéraire aura un nom unique.

Itinéraires dynamiques

Les itinéraires dynamiques sont des itinéraires définis par une variable cette variable peut être un nom, un numéro ou un id obtenu à partir des données client sur l'application. Cela est pratique lorsque vous travaillez avec une API, où l'ID sera probablement l'ID de l'élément provenant de la base de données.

Dans Nuxt, les itinéraires dynamiques sont définis par l'ajout un _ vers un nom de fichier ou un nom de dossier dans le dossier des pages. Par exemple, si vous voulez un itinéraire dynamique dont le nom de variable est id il vous suffit de nommer votre fichier _id.vue et Nuxt crée automatiquement un itinéraire dynamique pour vous. Par exemple:

 pages /
- | moi/
----- | index.vue
----- | about.vue
----- | _routeName
------- | index.vue
------- | info.vue
- | tableau de bord/
----- | user.vue
----- | settings.vue
- | dashboard.vue
- | work.vue
- | _id.vue
- | contact.vue
- | index.vue 

Cela créerait automatiquement un fichier de routeur avec les routes suivantes,

 {
      nom: «travail»,
      chemin: '/ travail',
      composant: 'pages / travail'
    },
    {
      nom: «contact»,
      chemin: '/ contact',
      composant: 'pages / contact'
    },
    {
      nom: 'id',
      chemin: '/: id',
      composant: 'pages / _id.vue'
    }
    {
      Nomme-moi',
      chemin: '/ moi',
      composant: 'pages / me / index.vue'
    },
    {
      nom: «me-about»,
      chemin: '/ moi / à propos',
      composant: 'pages / me / about.vue'
    },
    {
      nom: 'me-routeName',
      chemin: '/ me /: routeName',
      composant: 'pages / me / _routeName / index.vue'
    },
    {
      nom: 'me-routeName-info',
      chemin: '/ moi /: routeName / info',
      composant: 'pages / me / route.vue'
    },
    {
      nom: 'tableau de bord',
      chemin: '/ tableau de bord',
      composant: 'pages / dashboard.vue',
      enfants: [
        {
          name: 'dashboard-user',
          path: '/dashboard/user',
          component: 'pages/dashboard/user.vue'
        },
        {
          name: 'dashboard-settings',
          path: '/dashboard/settings',
          component: 'pages/dashboard/settings.vue'
        }
      ]
    }
  ]
} 

Bien que certaines balises de routeur Vue.js fonctionnent dans Nuxt et puissent être utilisées de manière interchangeable, il est recommandé d'utiliser des composants de routeur Nuxt. Voici quelques différences entre les balises de routeur Nuxt et les balises de routeur Vue.js.

Différence entre vue.js router et nuxt.js router

À ce stade, voici à quoi devrait ressembler votre application: , avec la navigation montrée en haut.

Maintenant que nous comprenons comment fonctionnent les pages et les itinéraires Nuxt, ajoutons notre première page et l'itinéraire about.vue . Cette page répertorie certains répertoires de l'application avec un lien vers une nouvelle page qui affiche plus d'informations sur un tel répertoire.

Ajoutons-y le code suivant:

À partir de la section du script nous avons créé un tableau que nous stockons dans la variable des répertoires . Chaque tableau contient un objet avec id nom et info . Ce sont les données que nous montrerons à l'utilisateur lorsque cette page sera ouverte. Nous voulons le montrer à l'utilisateur de manière à ce que les noms soient cliquables.

Nous le faisons dans la section du modèle en utilisant v-for pour parcourir le tableau. Cela permet d'obtenir chaque élément du tableau auquel nous pouvons accéder en utilisant le répertoire . Dans la boucle, nous utilisons nuxt-link pour gérer la liaison de chaque fois. En utilisant nuxt-link nous transmettons les détails ( id nom et info ) de chaque élément du répertoire via le routeur nuxt. Nous le faisons parce que nous voulons pouvoir l'afficher sur la page de présentation lorsque l'utilisateur clique sur un élément.

Si vous accédez à l'itinéraire / about à l'aide de votre navigateur, vous devriez voir quelque chose comme ceci:

Maintenant, créons un nouveau fichier et nommez-le _id.vue. Cela créerait automatiquement une route dynamique qui prend le paramètre id à partir du lien afficher un peu d'informations sur n'importe quel répertoire cliqué sur la page À propos.

Ajoutons ceci à notre fichier:

Ce que nous avons fait est de créer une page qui récupère les données du paramètre d'itinéraire dir en utilisant le this. $ Route.params . Cela nous donne le nom et info du répertoire cliqué, que nous affichons ensuite à l'utilisateur.

Donc, si vous cliquez sur un lien de répertoire (par exemple un répertoire de magasin), vous devrait voir ceci.

Mais il y a un problème, si vous actualisez cette page, les informations de votre répertoire sont perdues et vous obtenez une erreur. Ce problème serait résolu à l'aide de notre Vuex Store nous allons donc y plonger.

Utilisation de Vuex Store à Nuxt

Vuex est accessible à Nuxt en utilisant deux modes:

1. Mode classique ( obsolète ).
2. Mode modules.

Mode modules

Nuxt crée automatiquement un dossier Store lors de la création de votre application. En mode Modules, Nuxt traiterait chaque fichier à l'intérieur de ce dossier comme un module mais index.js est requis pour que le magasin Vuex soit activé dans votre application. Créons donc un fichier index.js dans notre dossier de magasin et configurons-le pour l'utiliser. Ajoutons ce qui suit à notre fichier:

index.js

 export const state = () => ({
  
})

exporter les const getters = {

}

exporter les mutations const = {
  
}

exporter des actions const = {
  
} 

Tout ce que nous avons fait est de configurer le magasin pour notre fichier avec tout ce dont nous pourrions avoir besoin; l'état pour stocker des données, getters pour effectuer des manipulations supplémentaires sur notre état mutations pour modifier notre état et actions pour commettre des mutations.

Nuxt permet également aux utilisateurs de séparer chaque concept principal en différents fichiers, ce qui signifie que nous pouvons avoir store.js getters.js mutation.js et action.js et ceci est bon car il facilite la maintenance. Maintenant, nous corrigeons le problème de la disparition du répertoire lors de l'actualisation, nous utiliserons le magasin, mais d'abord, nous devons installer et configurer Vuex persist pour notre magasin.

Installer Vuex persist de npm en utilisant l'une des commandes ci-dessous, selon vos préférences.

 $ npm install --save vuex-persist 

ou

 $ yarn add vuex-persist 

After en installant, nous allons créer un fichier vuex-persist.js dans notre dossier de plugins et ajouter ce qui suit:

 importer VuexPersistence depuis 'vuex-persist'

exporter par défaut ({
  boutique
}) => {
  window.onNuxtReady (() => {
    nouveau VuexPersistence ({
      stockage: window.localStorage
    }). plugin (magasin);
  });
} 

Ici, nous importons notre plug-in à partir de nœuds-modules et le configurons pour enregistrer votre magasin dans localStorage . Ce plugin vous permet de choisir d'autres options de stockage telles que sessionStorage aussi donc n'hésitez pas à explorer leur documentation pour plus d'informations.

N'oubliez pas de l'ajouter à votre nuxt. fichier config.js .

 / *
   ** Plugins à charger avant de monter l'application
   * /
  plugins: [{
    src: '~/plugins/vuex-persist',
    mode: 'client'
  }]

Ici, nous avons ajouté le chemin du fichier à notre plugin et dit à Nuxt de ne lancer ce plugin que du côté client de cette application.

Maintenant, nous pouvons définir notre stocker pour accepter et stocker les informations du répertoire. Mettez à jour votre magasin pour gérer les informations d'annuaire comme ceci:

 export const state = () => ({
  répertoire: ''
})
exporter les const getters = {
}
exporter les mutations const = {
  saveInfo (état, charge utile) {
    state.directory = payload.directory
  }
}
exporter des actions const = {
} 

Ce que nous avons fait est d'ajouter un état du répertoire à notre magasin et une fonction de mutation saveInfo qui modifie la valeur de l'état du répertoire que nous

Ensuite, dans votre fichier about.vue mettez-le à jour pour qu'il ressemble à cela.