An example Nuxt Page component heavily commented from the Nuxt documentation

Page.vue

<template>
    <div>
        <!-- nuxt-child
        For Nested Route Pages:
        This component is used for displaying the children components in a nested route.-->
        <div>
            <h1>I am the parent view</h1>
            <nuxt-child/>
        </div>

        <!--nuxt-link
        This component is used to link the page components between them. -->
        <div>
            <h1>Home page</h1>
            <nuxt-link to="/about">About</nuxt-link>
        </div>

        <!-- no-ssr
        This component is used to purposely remove the component from the subject of server side rendering.-->
        <div>
            <sidebar />
            <no-ssr placeholder="Loading...">
                <!-- this component will only be rendered on client-side -->
                <comments />
                <!-- loading indicator -->
                <comments-placeholder slot="placeholder" />
            </no-ssr>
        </div>

    </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Admin > Data > Home"
    };
  },

  // You may want to fetch data and render it on the server-side.
  // Nuxt.js adds an asyncData method that lets you handle async operations before setting the component data.
  asyncData(context) {
    return { project: "nuxt" };
  },

  // The fetch method is used to fill the store before rendering the page,
  // it's like the asyncData method except it doesn't set the component data.
  fetch({ store, params }) {
    return axios.get("http://my-api/stars").then(res => {
      store.commit("setStars", res.data);
    });

    // An example with Vuex async/await
    // async fetch ({ store, params }) {
    //     await store.dispatch('GET_STARS');
    // }
  },

  // Nuxt.js uses vue-meta to update the headers and html attributes of your application.
  // Use the head method to set the HTML Head tags for the current page.
  // Your component data are available with this in the head method, you can use set custom meta tags with the page data.
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: "My custom description"
        }
      ]
    };
  },

  // Every file (first level) in the layouts directory will create a custom layout accessible with
  // the layout property in the page component.
  layout: "admin",

  // Set the middleware for a specific page of the application.
  middleware: "authenticated",

  // The scrollToTop property lets you tell nuxt.js to scroll to the top before rendering the page.
  scrollToTop: true,

  // Nuxt.js uses the <transition> component to let you create amazing transitions/animations between your pages.
  transition: {
    name: "The transition name applied on all the route transitions.",
    mode:
      "The transition mode applied on all routes, see Vue.js documentation: https://vuejs.org/v2/guide/transitions.html#Transition-Modes",
    css:
      "Whether to apply CSS transition classes. Defaults to true. If set to false, will only trigger JavaScript hooks registered via component events.",
    duration:
      "The duration (in milliseconds) applied on the transition, see Vue.js documentation: https://vuejs.org/v2/guide/transitions.html#Explicit-Transition-Durations",
    type:
      'Specify the type of transition events to wait for to determine transition end timing. Available values are "transition" and "animation". By default, it will automatically detect the type that has a longer duration.',
    enterClass:
      "The starting state of the transition class. See Vue.js documentation: https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes.",
    enterToClass:
      "The ending state for the transition. See Vue.js documentation: https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes",
    enterActiveClass:
      "The class applied across the entire transition duration. See Vue.js documentation: https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes",
    leaveClass:
      "	The starting state of the transition class. See Vue.js documentation: https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes",
    leaveToClass:
      "	The ending state for the transition. See Vue.js documentation: https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes",
    leaveActiveClass:
      "The class applied across the entire transition duration. See Vue.js documentation: https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes"
  },

  // Nuxt.js lets you define a validator method inside your dynamic route component.
  validate({ params, store }) {
    // Check if `params.id` is an existing category
    return store.state.categories.some(category => category.id === params.id);
  },

  // Watch query strings and execute component methods on change (asyncData, fetch, validate, layout, ...)
  watchQuery: ["page"]
};
</script>