Getting started with Nuxt.js

What is Nuxt?

Nuxt is an open-source framework for Vue, which is an open-source framework for JavaScript development. Phew! It may sound complex, but Nuxt is similar to other meta-frameworks like Gatsby or Next that provide built-in functionality to help you quickly build apps that are performant and follow consistent best practices.

At its core, Nuxt provides automatic performance optimization, routing, component imports, and options for server-side rendering (SSR) or static site generation (SSG). Beyond these features, Nuxt has modules for added functionality. If you’ve ever used Gatsby for React, modules are similar to plugins.

Installation

You can start a new Nuxt project easily with create-nuxt-app. This CLI provides an interactive menu for quickly setting up your project.

yarn create nuxt-app <project-name>

npx create-nuxt-app <project-name>

The CLI will prompt you for the following options:

• Package manager (yarn or npm)
• Programming language (JS or TS)
• UI Framework (Multiple options, including none)
• Nuxt.js Modules (Axios, PWA, Content, or none)
• Linting tools (Multiple options including none)
• Testing framework (Multiple options, including none)
• Rendering mode (Universal or SPA)
• Deployment target (Server or Static)
• Development tools (multiple options)
• GitHub username
• Version control system (Git, none)

If you have any questions with create-nuxt-app, you can always run --info or --help.

Nuxt project configuration

Nuxt scaffolds the project for us with several files and directories. We’ll focus on the following initially:

/components

/pages

/store

/layouts

Automatic component imports with Nuxt

With Nuxt, any component within your components directory will be automatically imported to any page or even other components. There is no need to manually list every single component in your script tag!

In our demo project, we can see that there is a Logo.vue component within the /components directory.

Because this is located in this folder, we can now use it with the <Logo /> tag anywhere in the project.

In the /pages directory, there is an index.vue file. This file uses the Logo component, but as you can see it is not being imported with the script tag. It just works!

Read more about the Nuxt components directory here.

Automatic routing with Nuxt

Nuxt handles page routing for you out of the box. All files within your pages/ directory will automatically generate a route based on the file name.

In this demo project, the index.vue file in the pages directory becomes our index route. We can see this page when we visit the development server.

For example, if we wanted to also have an "about" and "contact" page, we’d add them to our pages directory like this:

pages/
--| index.vue
--| about.vue
--| contact.vue

This automatically creates /about and /contact routes displaying these pages. You can also use nested directories that will correspond to subdomains.

pages/
--| index.vue
--| about.vue
--| contact.vue
--| portfolio/
    --| vue-project.vue
    --| nuxt-project.vue
    --| ionic-project.vue

You could then visit /portfolio/vue-project and the route is generated for you.

Important: When linking to a page internally, use the <NuxtLink /> component. Use a regular anchor tag for external links.

You can read more about Nuxt automatic routing here.

Automatic Vuex store configuration

Nuxt also provides a /store directory for a Vuex store. By creating a file in this directory, Nuxt will automatically activate the Vuex option for you. There are details about Vuex and Nuxt in the documentation here, or check out the Vuex documentation for more information.

Nuxt layout configuration

Layouts in Nuxt are optional, but create-nuxt-app does provide the layouts directory and a default.vue file that will be applied to all pages automatically. You can either update the default.vue with the layout of your choice, or you can delete the directory if you prefer to style your pages a different way.

You can also have multiple layout files and specify which layout you want to use in the script tag like this:

<script>
export default {
  layout: 'blog',

  // OR

  layout (context) {
    return 'blog'
  }
}
</script>

Now you’re ready to start building your site! Nuxt has great documentation and some tutorials on its blog that I definitely recommend checking out. I’ll be posting about Nuxt over the next few weeks, so feel free to follow me to learn more. You can also watch my talk on Unpacking the Nuxt Content Module here.