Nuxt Pages

README.md

Nuxt Pages Setup

• See the vue documentation

All .vue files in the pages directory are atomatically given routes. This makes setting up a navigation quick and easy.

Dynamic Pages

Dynamic pages are automatically generated. A great example are blog posts created using a CMS. You will use _slug.vue in the pages/ directory to access this type of content that is generated by an API.

• Use an asynchronous function with params to get information from the api:

<template>
  <h1>{{ this.slug }}</h1>
</template>
<script>
export default {
  async asyncData({params}) {
    const slug = params.slug
    return { slug }
  }
}
</script>

• If the slug is in a directory inside of pages/ such as pages/_blog/_slug.vue, you will need to specify that in your parameters. By adding the variable book as seen below, you would be able to access it in the same way

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

• fetch is used to asynchonously call data from the api.

Setting a layout

• In your export default of your page, set the layout with:
  • layout: 'blog'

Ignoring pages

• If you want a page to be ignored by the router, prefix it with - like: pages/-about.vue. This file will not have an auto generated route path

---