The head property

Nuxt.js let you define all default meta for your application inside nuxt.config.js, use the same head property

  • Type: Object or Function
nuxt.config.js
export default {
  head: {
    titleTemplate: '%s - Nuxt.js',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },

      // hid is used as unique identifier. Do not use `vmid` for it as it will not work
      { hid: 'description', name: 'description', content: 'Meta description' }
    ]
  }
}

To know the list of options you can give to head, take a look at vue-meta documentation .

You can also use head as a function in your components to access the component data through this (read more ).

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
Configuration Glossary The globalName property
Configuration Glossary The hooks Property