Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
93 lines (66 sloc) 2.43 KB
title description
Installation
Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency.

Nuxt.js is really easy to get started with. A simple project only need the nuxt dependency.

Using Nuxt.js starter template

To start quickly, the Nuxt.js team has created a starter template.

Download the .zip starter template or install it with vue-cli:

$ vue init nuxt/starter <project-name>

If vue-cli is not installed, please install it with npm install -g vue-cli

then install the dependencies:

$ cd <project-name>
$ npm install

and launch the project with:

$ npm run dev

The application is now running on http://localhost:3000

Nuxt.js will listen on the files changes inside the `pages` directory, so 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 application from scratch is also really easy, it only needs 1 file and 1 directory. Let's create an empty directory to start working on the application:

$ mkdir <project-name>
$ cd <project-name>

Info: replace project-name by the name of the project.

The package.json

The project needs a package.json file to specify how to start nuxt:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

scripts will launch Nuxt.js via npm run dev.

Installing nuxt

Once the package.json has been created, add nuxt to the project via NPM:

npm install --save nuxt

The pages directory

Nuxt.js will transform every *.vue file inside the 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 on the files changes inside the `pages` directory, so no need to restart the application when adding new pages

To discover more about the directory structure of the project: Directory Structure Documentation.