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.
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.
If we navigate to http://localhost:3000, you should now be able to see our application on screen!
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.
For example, if we wanted to change the static title of our application to "My Nuxt Application", we can do so by editing the title key:
You should now have an application up and running with Nuxt! :)