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.
2
Answers
From nuxt documentation:
So try to add an
hid
attribute to your meta tags to identify them and be able to override them with sub components.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.