You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

The Head method

Nuxt 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 ).