Installation

Débuter avec Nuxt.js est vraiment facile. Un projet simple n'a besoin que d'une dépendance à nuxt.

Utiliser create-nuxt-app

Afin de démarrer rapidement, l'équipe Nuxt.js a créé un outil de démarrage create-nuxt-app.

Assurez-vous que npx est installé (npx est livré par défaut depuis NPM 5.2.0)

$ npx create-nuxt-app <project-name>

ou avec yarn:

$ yarn create nuxt-app <project-name>

Il vous sera posé quelques questions :

  1. Choisir entre différents frameworks intégrés côté serveur :
  2. Choisir votre interface utilisateur préférée :
  3. Choisissez votre framework de test préféré :
    • Aucun (sentez-vous libre d'en ajouter un plus tard)
    • Jest
    • AVA
  4. Le mode Nuxt désiré (Universel ou SPA)
  5. Ajouter le module axios pour faire des requêtes HTTP facilement dans votre application.
  6. Ajouter EsLint pour Linter votre code en sauvegardant.
  7. Ajouter Prettier pour prettifier votre code en sauvegardant.

Après réponses, les dépendences s'installerons et la prochaine étape sera de naviguer dans le dossier du projet pour le lancer avec :

$ cd <project-name>
$ npm run dev

L'application est désormais accessible à l'adresse http://localhost:3000.

Nuxt.js va surveiller les modifications faites sur les fichiers du répertoire pages aussi il n'y a pas besoin de redémarrer le serveur quand vous ajoutez de nouvelles pages.

Pour en savoir plus sur l'organisation des répertoires dans un projet, consultez la documentation de l'Architecture des répertoires.

Commencer depuis zéro

La création d'une application Nuxt.js à partir de zéro est également très simple, elle ne nécessite qu'1 fichier et 1 répertoire. Créez un répertoire vide pour commencer à travailler sur l'application :

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

Info : remplacez <nom-du-projet> par le nom du projet.

Le package.json

Le projet a besoin d'un fichier package.json avec un script permettant de lancer nuxt :

{
  "name": "mon-application",
  "scripts": {
    "dev": "nuxt"
  }
}

scripts lancera Nuxt.js via npm run dev.

Installation de nuxt

Une fois que le package.json est créé, ajoutez nuxt au projet via npm :

$ npm install --save nuxt

Le dossier pages

Nuxt.js va transformer chaque fichier *.vue se trouvant dans le dossier pages en une route pour l'application.

Créez le dossier pages :

$ mkdir pages

puis créez la première page pages/index.vue:

<template>
  <h1>Bonjour le monde !</h1>
</template>

et lancez le projet avec :

$ npm run dev

L'application est désormais accessible à l'adresse http://localhost:3000.

Nuxt.js va surveiller les modifications faites sur les fichiers du répertoire pages aussi il n'y a pas besoin de redémarrer le serveur quand vous ajoutez de nouvelles pages

Pour en savoir plus sur la structure des dossiers du projet, consultez la documentation de l'Architecture des répertoires.

Vous avez vu une erreur ou vous souhaitez contribuer à la documentation ? Éditez cette page sur GitHub !