Getting Started with Nuxt.js

17 Jul 2017

In this article, we'll be taking a look at Nuxt.js, a framework that focuses on creating universal Vue.js applications. As well as using Vue, it also uses Webpack and Babel to provide an extremely powerful toolset with a bundle size of only 28kb.

If you prefer to watch a video of this article, then I've got you covered:

Installing the Vue CLI

Creating our first Nuxt project will require the Vue CLI. To install it we can run:

# Install the Vue CLI
$ npm install vue-cli -g

As we're installing it globally, we can then use it within our terminal.

Creating a Nuxt Project

Now that we have the Vue CLI installed, we can initialise a new project.

# New project
$ vue init nuxt/starter hello-nuxt

# Change directory
$ cd HelloNuxt

A wizard will then guide you through the project metadata, such as a project name, description and author.

Project Metadata

This will create a new Nuxt project named hello-nuxt. We then have to install the project's dependencies:

# Install dependencies
$ npm install

Run the Project

Once the dependencies are installed, our project can be ran inside of the browser with the following npm script:

# Run the project in our browser
$ npm run dev

The dev script exists inside of our package.json. As you can see below, we're simply running the nuxt command from inside of our project.

Nuxt Package.json

If we navigate to http://localhost:3000, you should now be able to see our application on screen!

Nuxt Application

Any changes to our application code will automatically be updated on our web browser and it makes developing with Nuxt a pleasant experience.

Routing

Nuxt has a very simplistic approach to routing and is file system based. Inside of the pages folder, each .vue file acts as a route within our application. This example can be seen initially with the index.vue file, as the above contents are displayed as default.

If we made a new file named about.vue, we'd be able to create a template that contains some content:

<template>
  <h1>About Page</h1>
</template>

As Nuxt creates our routes, we'd automatically be able to navigate to our new /about page from within our index.vue. I've replaced the base template with a simplified one that only contains a link to the about page.

<template>
  <a href="about">About Page</a>
</template>

Configuration

We can also change the configuration of our application within our nuxt.config.js. This allows us to edit the header items of our application, such as the title, meta, link, as well as particular build scripts.