-
Notifications
You must be signed in to change notification settings - Fork 248
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Head script is added multiple times on navigation #498
Comments
The behaviour you are describing is expected, page specific meta info is completely removed when you move away from that page. If its really downloaded again by your browser, you should make sure that head-script.js is cachable and/or maybe explicitly add a link prefetch for that file. Please check the docs for |
@pimlie I have updated the repo to use
Neither change made any difference to the behaviour.
This also did not have the effect that I expected. head-style.css sets the body background to red. Given the docs, I expected that the first time I navigated to /foo, the body background would change to red, and stay that way on all subsequent navigations. This does not happen - going to / after /foo turns the background white again, going back to /foo downloads the css file again and turns the background red. You can see this behaviour in the latest commit to the repo. |
Thanks for your contribution to vue-meta! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:
|
There have been no new releases since I reported this issue so it is not fixed and not stale |
Could you create a working repro on codesandbox please? |
Thanks, seems like Not ideal, but this could maybe be a workaround for now? So just make sure to return the script once by using a custom var. For the css you could maybe try to remove the hid prop, it could be that the existence of a hid has the tag removed let headJsAdded = false
...
export default {
...
head () {
const meta = {
script: headJsAdded ? [] : [{
hid : 'head-script',
src : '/head-script.js',
once : true,
}],
link: [{
hid : 'head-style',
rel : 'stylesheet',
href : '/head-style.css',
once : true,
}]
}
headJsAdded = true
return meta
}), |
I have a workaround already - my use case is only javascript, and the scripts I'm importing all add a value to window, so i'm doing:
|
Thanks for your contribution to vue-meta! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:
|
This is still reproducible with nuxt 2.11.0 and vue-meta 2.3.2 - see https://codesandbox.io/s/github/simonbrent/nuxt-vue-meta-bug |
Thanks, have added the pending label so stale bot doesnt close it as I wont expect to have time to fix this soon |
This should be possble in the upcoming release by combining let haveAddedTheJs = false // <-- outside the component scope
export default {
...
head() {
const skip = haveAddedTheJs
haveAddedTheJs = true
return {
script: [
{ once: true, skip, src: '/file.js' }
]
}
}
} |
Is that going to be the permanent solution then? It still seems pretty hacky. |
Trying to fix this in vue-meta is even more hackier. With once we need to track the state whether the tag has been added or not. If you use head as a function then it returns a new object on every meta update, so we cant use the object itself. This means if we want to support this in vue-meta itself then we need keep track of all head elements that have been added with once, and then on every metadata update render all elements with once again but only add them if we dont track them yet. I feel keeping this tracking state (if a once: true tag has already been added or not) in userland as above is a nicer/cleaner solution. But if a lot of people think we should do this in vue-meta anyway then im happy to do so |
Fair enough |
Hi there, I'm encountering almost exactly same issue but with Google Maps API. Happens with navigating across pages as well. Tried the above fix with
|
Same here with the Google Adsense Script |
Hello, we have similar behavior with other Ad scripts. It works well if we put in nuxt.config.js, but if we want to only add to some pages, it seems to rerun the script on navigation, which it shouldn't. It's creating new, duplicatate Ad Managers each route change and getting silly. Is there a way to get the desired behavior without loading globally? |
@JSAustin take a look at the workaround above. |
@pimlie sorry for bothering you but can you explain why it's not possible to only use |
For anyone facing this in nuxt at the moment, a good workaround is to check using process.client whether page is rendered on the client and if it is, don't insert the script. That will work if you only need the script to work on initial page load and not on soft navigation for example |
I am opening a new issue, since #381 is closed, but I am still finding that there is a problem.
Nuxt version
2.10.2
Vue-meta version
2.3.1
Reproduction link
https://github.com/simonbrent/nuxt-vue-meta-bug
Steps to reproduce
What is expected?
"head-script.js" is downloaded once, the first time you navigate to /foo
What is actually happening?
"head-script.js" is downloaded every time you navigate to /foo
The text was updated successfully, but these errors were encountered: