⚠️ You are looking at the english version of the page. Help us translate it here.
Want to take a look at our new docs? Our new docs are now in beta. Have fun!

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.

Your component data are available with this in the head method, you can use set custom meta tags with the page data. Be sure to also take a look at the Nuxt FAQ.

<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>

Info: To avoid duplicated meta tags when used in child component, set up an unique identifier with the hid key for your meta elements (read more).

Contributors

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us