BLACK FRIDAY - Get 35% off your Mastering Nuxt license!

Installation

Prérequis

Nous pouvons découvrir ci-dessous comment créer un projet Nuxt.js fonctionnel en 4 étapes.

Pour commencer avec Nuxt.js, nous pouvons également utiliser CodeSandbox qui est une très bonne manière de tester Nuxt.js rapidement et/ou de partager votre code avec d'autres personnes.

Node

node - au moins v8.9.0

Nous recommandons d'avoir la dernière version installée.

Éditeur de texte

On peut utiliser celui que l'on préfère, mais nous recommandons VSCode.

Terminal

On peut utiliser celui que l'on préfère, mais nous recommandons le terminal de VSCode.

Commencer de zéro

Créer un projet Nuxt.js de zéro demande seulement un répertoire et un fichier.

Dans cet exemple, nous allons utiliser le terminal pour créer les répertoires et fichiers mais nous pouvons utiliser votre éditeur pour les créer.

Première étape : configurer votre projet

Pour commencer, il faut créer un répertoire vide avec le nom du projet et naviguer à l'intérieur de celui-ci :

mkdir <nom-du-projet>
cd <nom-du-projet>

Remplacer <nom-du-projet> avec le nom du projet.

Puis créer un fichier nommé package.json :

touch package.json

Ouvrir le fichier package.json avec notre éditeur préféré et ajouter ce contenu JSON :

package.json
{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

scripts définit les commandes Nuxt.js que nous allons lancer avec la commande npm run <commande>.

À quoi sert le fichier package.json ?

Le fichier package.json est comme une carte d'identité pour notre projet. Si on ne sait pas ce qu'est le fichier package.json, nous vous recommandons grandement de lire la documentation de NPM.

Deuxième étape : installer nuxt

Une fois le fichier package.json créé, nous devons ajouter nuxt à votre projet avec la commande npm ou yarn comme ci-dessous :

yarn add nuxt
npm install nuxt

Cette commande va ajouter nuxt comme une dépendance du projet et va automatiquement l'ajouter à notre package.json. Le répertoire node_modules va aussi être créé, c'est l'endroit où sont installés tous les packages et leurs dépendances.

Un fichier yarn.lock ou package-lock.json est aussi créé, ce qui assure une consistance et une compatibilité dans les dépendances installées par votre projet.

Troisième étape : créer notre première page

Nuxt.js transforme tous les fichiers *.vue dans le répertoire pages comme une route pour l'application.

Créer le répertoire pages dans notre projet :

mkdir pages

Puis, créer un fichier index.vue dans le répertoire pages :

touch pages/index.vue

Il est important que cette page soit appelée index.vue car elle sera la page par défaut quand notre application sera ouverte. C'est la page d'accueil et elle doit être appelée index.

Il faut ouvrir le fichier index.vue dans notre éditeur et ajouter le contenu suivant :

pages/index.vue
<template>
  <h1>Hello world!</h1>
</template>

Étape finale : lancer le projet

On peut lancer notre projet en tapant la commande ci-dessous dans le terminal :

yarn dev
npm run dev

La commande dev est utilisée lorsque l'application est lancée en mode développement.

L'application est maintenant en cours d'exécution sur http://localhost:3000.

On peut l'ouvrir dans notre navigateur en cliquant sur le lien dans le terminal et nous devrios voir le texte "Hello World" que nous avons ajouté dans l'étape précédente.

Une fois Nuxt.js lancé en mode développement, il écoutera les changements de fichiers dans la plupart des répertoires, il n'est pas nécessaire de redémarrer l'application quand on édite ou ajoute une page.

Lorsque on lance la commande dev, un répertoire .nuxt est créé. Ce répertoire devrait être ignoré par Git (ou tout autre système de gestion de versions). On peut faire ceci en créant un fichier .gitignore à la racine de votre projet et en y ajoutant .nuxt.

Étape bonus

Créer une page nommée fun.vue dans le répertoire pages.

Ajouter un <template></template> et insérer un titre avec une phrase drôle à l'intérieur.

On peut ensuite aller sur le navigateur et regarder la nouvelle page sur http://localhost:3000/fun.

Si nous créons un répertoire nommé more-fun et ajoutons un fichier index.vue à l'intérieur, cela donnera le même résultat que de créer un fichier more-fun.vue.

Utiliser create-nuxt-app

Pour créer rapidement un nouveau projet, nous pouvons utiliser create-nuxt-app.

Il faut vérifier que npx est installé (npx est embarqué par défaut depuis npm v5.2.0) ou npm v6.1 ou yarn.

yarn create nuxt-app <project-name>
npx create-nuxt-app <project-name>
npm init nuxt-app <project-name>

Quelques questions nous seront posées (nom, options Nuxt, framework UI, TypeScript, linter, framework de test, etc.), quand on y aura répondu, toutes les dépendances seront installées. La prochaine étape est de naviguer dans le répertoire et de démarrer notre application:

cd <project-name>
yarn dev
cd <project-name>
npm run dev

Notre application est maintenant en cours d'exécution sur http://localhost:3000.