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.

  1. <template>
  2.   <h1>{{ title }}</h1>
  3. </template>
  5. <script>
  6.   export default {
  7.     data() {
  8.       return {
  9.         title: 'Hello World!'
  10.       }
  11.     },
  12.     head() {
  13.       return {
  14.         title: this.title,
  15.         meta: [
  16.           // hid is used as unique identifier. Do not use `vmid` for it as it will not work
  17.           {
  18.             hid: 'description',
  19.             name: 'description',
  20.             content: 'My custom description'
  21.           }
  22.         ]
  23.       }
  24.     }
  25.   }
  26. </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).