Nuxt.JS Installation

From WikiOD

Nuxt.js is very simple and easy to use. A simple project only needs to add nuxt as a dependent component.

Run create-nuxt-app[edit | edit source]

To get started quickly, the Nuxt.js team created the scaffolding tool  create-nuxt-app .

Ensure that npx is installed (npx is installed by default in NPM version 5.2.0):

$ npx create-nuxt-app <Project name>

Or use yarn:

$ yarn create nuxt-app <Project name>

It will let you make some choices:

  1. Choose between integrated server-side frameworks: None (Nuxt default server) Express Koa Hapi Feathers Micro Fastify Adonis  (WIP)
  2. Choose your favorite UI framework: None Bootstrap Vuetify Bulma Tailwind Element UI Ant Design Vue Buefy iView Tachyons
  3. Choose your favorite test framework: None (feel free to add one) Jest AVA
  4. Choose the Nuxt mode you want (Universal or SPA)
  5. Add the  axios module  to easily send HTTP requests to your application.
  6. Add  EsLint  to check your code for code specifications and errors when saving.
  7. Add  Prettier  to format/beautify your code when saving.


When it finishes running, it will install all dependencies, so the next step is to start the project:

$ cd <project-name>
$ npm run dev

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

Note: Nuxt.js will monitor file changes in the pages directory, so there is no need to restart the application when adding a new page.

Understanding the directory structure of the template project:  Directory structure .

Create a new project from scratch[edit | edit source]

If we don't use the starter template provided by Nuxt.js, we can also create a new Nuxt.js application project from scratch. The process is very simple and only requires 1 file and 1 directory. As shown below:

$ mkdir <Project name>
$ cd <Project name>

Tip: Replace <project name> with the actual project name you want to create.

Create a new package.json file[edit | edit source]

The package.json file is used to set how to run nuxt:

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

The above configuration allows us to run nuxt by running npm run dev.

Install nuxt[edit | edit source]

Once package.json is created, you can install nuxt into the project with the following npm command:

$ npm install --save nuxt

Pages Directory[edit | edit source]

Nuxt.js will generate the routing configuration of the application based on all *.vue files in the pages directory.

Create the pages directory:

$ mkdir pages

Create our first page pages/index.vue:

<template>
   <nowiki><h1>Hello world!</h1></nowiki>
 </template>

Then start the project:

$ npm run dev

Now our application is running on  http://localhost:3000  .

Note: Nuxt.js will monitor file changes in the pages directory, so there is no need to restart the application when adding a new page.

Learn more about the directory structure of Nuxt.js applications: Directory structure.