Installation
Nuxt.js is really easy to get started with. A simple project only needs the
nuxtdependency.
Using create-nuxt-app
To get started quickly, the Nuxt.js team has created scaffolding tool create-nuxt-app.
Make sure you have npx installed (npx is shipped by default since NPM 5.2.0)
$ npx create-nuxt-app <project-name>Or with yarn:
$ yarn create nuxt-app <project-name>It will ask you some questions:
- Choose between integrated server-side frameworks:
- Choose your favorite UI framework:
- None (feel free to add one later)
- Bootstrap
- Vuetify
- Bulma
- Tailwind
- Element UI
- Ant Design Vue
- Buefy
- iView
- Tachyons
- Choose your favorite testing framework:
- The Nuxt mode you want (
UniversalorSPA) - Add axios module to make HTTP request easily into your application.
- Add EsLint to Lint your code on save.
- Add Prettier to prettify your code on save.
When answered, it will install all the dependencies so the next step is to navigate to the project folder and launch it with:
$ cd <project-name>
$ npm run devThe application is now running on http://localhost:3000.
Nuxt.js will listen for file changes inside the pages directory, so there is no need to restart the application when adding new pages.
To discover more about the directory structure of the project: Directory Structure Documentation.
Starting from scratch
Creating a Nuxt.js project from scratch is easy, only 1 file and 1 directory are required. Create an empty directory to start:
$ mkdir <project-name>
$ cd <project-name>Info: replace <project-name> with a name for the project.
The package.json
Every project needs a package.json file to start nuxt. Copy this json into your package.json and save before running npm install (below):
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}scripts will launch Nuxt.js via npm run dev.
Installing nuxt
With the package.json created, add nuxt to the project via npm:
$ npm install --save nuxtThe pages directory
Nuxt.js transforms every *.vue file inside a pages directory as a route for the application.
Create the pages directory:
$ mkdir pagesthen create the first page in pages/index.vue:
<template>
<h1>Hello world!</h1>
</template>and launch the project with:
$ npm run devThe application is now running on http://localhost:3000.
Nuxt.js will listen for file changes inside the pages directory, so there is no need to restart the application when adding new pages.
To discover more about the directory structure of the project: Directory Structure Documentation.
Contributors
Atinux
Haeresis
manniL
alexfinnarn
alexchopin
ideabrian
andrewjrhill
potato4d
gbezyuk
paulgv
178inaba
pi0
YoshinoriN
Vindexus
MichaelJCole
YogliB
gotdang
shashankgaurav17
clarkdo
MaxGfeller
sandrosc
pascalgermain
Haniek
mamboer
inouetakuya
wangxueliangCaught a mistake or want to contribute to the documentation? Edit this page on GitHub!