Pages directory

The pages directory contains your Application Views and Routes. Nuxt reads all the .vue files inside this directory and automatically creates the router configuration for you.

Every Page component is a Vue component but Nuxt adds special attributes and functions to make the development of your universal application as easy as possible.

<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>

<script>
  export default {
    // page properties go here
  }
</script>

<style>
  .red {
    color: red;
  }
</style>

Dynamic Pages

Dynamic pages can be created when you don't know the name of the page due to it coming from an API or you don't want to have to create the same page over and over again. To create a dynamic page you need to add an underscore before the .vue file name or before the name of the directory, if you want the directory to be dynamic. You can name the file or directory anything you want but you must prefix it with an underscore.

If you've defined a file named _slug.vue in your pages folder, you can access the value using the context with params.slug

<template>
  <h1>{{ slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const slug = params.slug // When calling /abc the slug will be "abc"
      return { slug }
    }
  }
</script>

If you've defined a file named _slug.vue inside a folder called _book you can access the value using the context with params.slug and params.book

<template>
  <h1>{{ book }} / {{ slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const book = params.book
      const slug = params.slug
      return { book, slug }
    }
  }
</script>

Properties

asyncData

asyncData is called every time before loading the component. It can be asynchronous and receives the context as an argument. The returned object will be merged with your data object.

export default {
  asyncData(context) {
    return { name: 'World' }
  }
}

fetch

Every time you need to get asynchronous data you can use fetch. Fetch is called on server-side when rendering the route, and on client-side when navigating.

<script>
  export default {
    data() {
      return {
        posts: []
      }
    },
    async fetch() {
      this.posts = await fetch('https://api.nuxtjs.dev/posts').then(res =>
        res.json()
      )
    }
  }
</script>

head

Set specific 

export default {
  head() {
    // Set Meta Tags for this Page
  }
}

layout

Specify a layout defined in the layouts directory.

export default {
  layout: 'blog'
}

loading

If set to false, prevents a page from automatically calling this.$nuxt.$loading.finish() as you enter it and this.$nuxt.$loading.start() as you leave it, allowing you to manually control the behavior, as this example  shows.

export default {
  loading: false
}

transition

Defines a specific transition for the page.

export default {
  transition: 'fade'
}

scrollToTop

The scrollToTop property lets you tell Nuxt to scroll to the top before rendering the page. By default, Nuxt scrolls to the top when you go to another page, but with child routes, Nuxt keeps the scroll position. If you want to tell Nuxt to scroll to the top when rendering your child route, set scrollToTop to true

export default {
  scrollToTop: true
}

Conversely, you can manually set scrollToTop to false on parent routes as well.

If you want to overwrite the default scroll behavior of Nuxt, take a look at the scrollBehavior option .

middleware

Defines middleware for this page. The middleware will be called before rendering the page.

export default {
  middleware: 'auth'
}

The watchQuery Property

Use the watchQuery key to set up a watcher for query strings. If the defined strings change, all component methods (asyncData, fetch(context), validate, layout, ...) will be called. Watching is disabled by default to improve performance.

export default {
  watchQuery: ['page']
}

export default {
  watchQuery: true
}

You can also use the function watchQuery(newQuery, oldQuery) to have more refined watchers.

export default {
  watchQuery(newQuery, oldQuery) {
    // Only execute component methods if the old query string contained `bar`
    // and the new query string contains `foo`
    return newQuery.foo && oldQuery.bar
  }
}

key

Same as the key property that can be used on Vue components in templates as a hint for the virtual DOM, this property allows the key value to be defined from the page itself (rather than the parent component).

By default in Nuxt, this value will be the $route.path, meaning that navigating to a different route will ensure a clean page component is created. Logically equivalent to:

<router-view :key="$route.path" />

The property can be a String or a Function which takes the route as the first argument.

Ignoring pages

If you want to ignore pages so that they are not included in the generated router.js file then you can ignore them by prefixing them with a -.

For example, pages/-about.vue will be ignored.

Configuration

You can rename the pages/ directory to something different by setting dir.pages option:

export default {
  dir: {
    // Rename `pages` directory to `routes`
    pages: 'routes'
  }
}