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.

You can also create routes with .js files and .ts files

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.

pages

<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

pages/_slug.vue

<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

pages/_book/_slug.vue

<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.

pages/index.vue

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

See more on how asyncData works in our Data Fetching chapter

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>

See more on how fetch works in our Data Fetching chapter

head

Set specific

tags for the current page. Nuxt uses vue-meta to update the document head and meta attributes of your application.

pages/index.vue

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

See more in our Meta Tags and SEO chapter

layout

Specify a layout defined in the layouts directory.

pages/index.vue

export default {
  layout: 'blog'
}

See more on layouts in our Views chapter.

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.

pages/index.vue

export default {
  loading: false
}

Only applies if loading is also set in nuxt.config.js.

See more in our Loading chapter.

transition

Defines a specific transition for the page.

pages/index.vue

export default {
  transition: 'fade'
}

See more on transitions in our Transitions chapter

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

pages/index.vue

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.

pages/index.vue

export default {
  middleware: 'auth'
}

See more on middleware in our Middleware chapter

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.

pages/index.vue

export default {
  watchQuery: ['page']
}

Warning: The new fetch hook introduced in 2.12 is not affected by watchQuery. For more information see listening to query string changes.

pages/index.vue

export default {
  watchQuery: true
}

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

pages/index.vue

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
  }
}

See more on the watch query property in our Data Fetching chapter

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.

Checkout the ignore option to learn more about it.

Configuration

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

nuxt.config.js

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

Checkout the dir option to learn more about it.