To prevent duplicate meta tags in child components from overwriting the same tags in parent components, you are advised to use the HID key to assign a unique id to meta tags.

For example, to describe the meta tag, we set a unique identifier for the HID attribute: description. When a component defines the same HID meta tag, vue-meta will know the override parent configuration.

Configure the default meta in the application configuration file nuxt.config.js:

. head: { title:'starter',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'keywords', content: 'keyword 1, keyword 2'},
      { hid: 'description', name: 'description', content: 'This is the generic description.'}],},...Copy the code

Override the specified meta configuration with hid in the page component:

export default {
  head () {
    return {
      title: `Page 1 (${this.name}-side)`,
      meta: [
        { hid: 'description', name: 'description', content: 'Page 1 description'}]}}}Copy the code