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.

  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>

The head Method - 图1

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