How to override global meta tags in a specific template in Nuxt?

user_13084917 0
Viewed 1310

I am not sure if this is possible but here it comes.

I have a nuxt.config.js such as (I have changed some information such as content and href attributes for privacy):

head: {
    htmlAttrs: {
      lang: 'de-DE'
    },
    title: 'My Title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'My Content.' },
    ],
    link: [
      { rel: 'icon', type: 'image/png', href: '/images/icons/favicon.png' },
      { rel: 'preload', as: 'style', onload: "this.onload=null;this.rel='stylesheet'", href: 'mycss' },
      { rel: 'preload', as: 'style', onload: "this.onload=null;this.rel='stylesheet'", href: 'mycss' },
      { rel: 'dns-prefetch', href: 'https://www.google-analytics.com' }
    ]
  }

As you can see I have two preload link tags which includes onload. I am doing some AMP pages for SEO and AMP gives an error for onload.

The attribute 'onload' may not appear in tag 'link rel=preload

So I want to override those link tags only in my AMP pages. What I have tried is head() function for my AMP pages to override global settings however it didn't override and actually added new links.

export default {
  head () {
    return {
       link: [
         // my links
      ]
    }
    
  }
}

I have checked the documentation and looked a few questions here but couldn't find a solution. Is there any way that I can achieve this ?

PS: I want to keep those 2 links in my global because there are lots of pages that uses it.

nuxt.js amp-html vue.js
2 Answers

From nuxt documentation:

To avoid any duplication when used in child components, please give a unique identifier with the hid key to the meta description. This way vue-meta will know that it has to overwrite the default tag.

So try to add an hid attribute to your meta tags to identify them and be able to override them with sub components.

// nuxt.config.js
head: {
    link: [
      { hid: 'my-stylesheet', rel: 'preload', as: 'style', href: 'mycss' },
    ]
  }

// page/amp.vue
head: {
    link: [
      { hid: 'my-stylesheet', rel: 'preload', as: 'style', href: 'overridedHref' },
    ]
  }
user_48707850

I had as well some issue, with head().

In dev mode I was not seeing any meta data rendered, but when I run nuxtgenereate static (which was my goal anyway) the links were there.

I am not sure, if you wanna go static, but I would try it, to see if it is there or check, what happens if you actually build the app.

user_141001350
Related