Want to take a look at our new docs? Our new docs are now in beta. Have fun!

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

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

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

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

Storyblok Support Us