Getting started with Nuxt.js
Tags: nuxt, vue
Published: 2021-01-04 13:28:52

---
title: Getting started with Nuxt.js
published: true
description: Learn the basics of Nuxt from installation and setup to leveraging features like automatic routing, component imports, and layouts. Nuxt is an open source Vue framework.
tags: nuxt, vue
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/28bo7vf2wmtfh2gusrvf.png
---

## 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](https://github.com/nuxt/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)


![Screenshot of create-nuxt-app CLI options](https://dev-to-uploads.s3.amazonaws.com/i/0n2pgcu13nuu9lkiayfg.png)

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](https://nuxtjs.org/docs/2.x/get-started/directory-structure#the-components-directory).

## 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](https://nuxtjs.org/docs/2.x/get-started/routing).

## 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](https://nuxtjs.org/docs/2.x/directory-structure/store), or check out the [Vuex documentation](https://vuex.vuejs.org/guide/) 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](https://nuxtjs.org/docs/2.x/get-started/installation) and [some tutorials on its blog](https://nuxtjs.org/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](https://www.youtube.com/watch?v=XyVFtlYwuQk).