The head property
Nuxt let you define all default meta for your application inside nuxt.config.js
, use the same head
property
- Type:
Object
orFunction
nuxt.config.js
export default {
head: {
titleTemplate: '%s - Nuxt',
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).