The Head method

Nuxt.js uses vue-meta to update the headers and html attributes of your application.

  • Type: Object or Function

Use the head method to set the HTML Head tags for the current page.

<template>
  <h1>{{ title }}</h1>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello World!'
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          // hid is used as unique identifier. Do not use `vmid` for it as it will not work
          {
            hid: 'description',
            name: 'description',
            content: 'My custom description'
          }
        ]
      }
    }
  }
</script>
To avoid duplicated meta tags when used in child component, set up a unique identifier with the hid key for your meta elements (read more ).
Edit this page on GitHub Updated at Mon, Jul 12, 2021
Components Glossary The Fetch Hook
Components Glossary The key Property