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:

Prérequis

• node - au moins v10.13 Nous vous recommandons d'installer la dernière version LTS.
• Un éditeur de texte, nous recommandons VSCode avec l'extension Vetur ou WebStorm
• Un terminal, nous vous recommandons d'utiliser le terminal intégré de VSCode ou le terminal de Webstorm .

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 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.). 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:

cd <project-name>
yarn dev

cd <project-name>
npm run dev

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

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 :

{
  "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 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.

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 :

<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

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.

É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 .