Understanding Vue components

We covered the /components/ directory briefly in Chapter 2, Getting Started with Nuxt, but we haven't got hands-on with it yet. All we know so far is there is a Logo.vue component in this directory if you install your Nuxt project with the Nuxt scaffolding tool. All the components in this directory are Vue components, just like the page components in the /pages/ directory. The main difference is that there is no asyncData method supported in these components in the /components/ directory. Let's take the copyright.vue component in /chapter-4/nuxt-universal/sample-website/ as an example:

// components/copyright.vue
<template>
  <p v-html="copyright"></p>
</template>

<script>
export default {
  data () {
    return { copyright: '&copy; Lau Tiam Kok' }
  }
}
</script>

Let's try replacing the data function in the preceding code with the asyncData function, as follows:

// components/copyright.vue
export...