You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

Page traduite Le contenu de cette page peut être déprécié.

Installation

Découvrez ci-dessous comment créer un projet Nuxt fonctionnel en 4 étapes.


Essayer Nuxt

Vous pouvez essayer Nuxt en ligne sur CodeSandbox ou StackBlitz:

Play on CodeSandbox Play on StackBlitz

Prérequis

Utiliser create-nuxt-app

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

Vérifiez que npx est installé (npx est livré par défaut depuis npm v5.2.0) ou npm v6.1 ou yarn.

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

Quelques questions nous seront posées (nom, options Nuxt, framework UI, TypeScript, linter, framework de test, etc.). Pour en savoir plus sur toutes les options voir Create Nuxt App .

Une fois les questions répondues, toutes les dépendances seront installées. La prochaine étape est de naviguer dans le répertoire et de démarrer notre application:

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

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

Une autre façon de démarrer avec Nuxt est d'utiliser CodeSandbox ce qui est un excellent moyen de jouer rapidement avec Nuxt et/ou de partager votre code avec d'autres personnes.

Commencer de zéro

Créer un projet Nuxt 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 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
yarn add nuxt
NPM
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 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
yarn dev
NPM
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 devrions voir le texte "Hello World" que nous avons ajouté dans l'étape précédente.

Une fois Nuxt 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.