Getting Started with Nuxt.js
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
# Run the project in our browser $ npm run dev
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.
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>
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
link, as well as particular
For example, if we wanted to change the static title of our application to "My Nuxt Application", we can do so by editing the
You should now have an application up and running with Nuxt! :)