There are 3 ways to add a title and meta description to your Nuxt.js application which is extremely useful for Search Engine Optimisation.

1) Use the nuxt.config.js file to add global titles and meta descriptions so that they are available on all pages. This does of course give you the same title and description on every page but it covers you for when you forget to add meta to a particular page.

export default {
  head: {
    title: 'Seo in Nuxt.js',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'SEO in Nuxt.js with the Head Property for amazing Search Engine Optimisation'
      }
    ],
  },
}

2) Add the head method as an object to your script tag in your page. This is a great way of setting a unique title and description for each page.

<script>
export default {
  head: {
    title: 'Home page',
    meta: [
      { hid: 'description', name: 'description', content: 'Home page description' }
    ],
  }
}
</script>

3) Add the head method as a function to your script tag in your page. With this option you can not only add a unique title and description for your page but you also have access to your data and computed properties.

<template>
  <h1>{{ title }}</h1>
</template>
<script>
export default {
  data () {
    return {
      title: 'Amazing Seo with Nuxt.js',
      description: 'Nuxt.js gives you the most amazing SEO by just adding a title and meta description to your page.'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: this.description }
      ]
    }
  }
}
</script>

Normally I set the nuxt.config.js with a global title and description and then in my pages I use the head as a function incase I end up using the the data for the title or meta description. This is extremely useful for when you are working with data from an api or dynamic pages where you don't know the title and meta description.

And as well as adding a title and description you can also add links to google fonts or external scripts either globally in the nuxt.config.js or locally in the page component if you prefer.

link: [      
       { 
         rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
      ],
script: [
      {
        src: 'https://identity.netlify.com/v1/netlify-identity-widget.js',
        defer: true
      }
    ]

Nuxt.js uses vue-meta so checkout the docs for all available metaInfo properties