Installation
Nuxt.js is really easy to get started with. A simple project only needs the
nuxt
dependency.
[
Nuxt.js Fundamentals
Learn how to get started quickly with Nuxt.js in videos.
Video courses made by VueSchool to support Nuxt.js development.
](https://vueschool.io/courses/nuxtjs-fundamentals/?friend=nuxt)
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 (name, Nuxt options, UI framework, TypeScript, linter, testing framework, etc.), 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 dev
The 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 nuxt
The pages
directory
Nuxt.js transforms every *.vue
file inside a pages
directory as a route for the application.
Create the pages
directory:
$ mkdir pages
then create the first page in pages/index.vue
:
<template>
<h1>Hello world!</h1>
</template>
and launch the project with:
$ npm run dev
The 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.