Head script is added multiple times on navigation

[simonbrent]

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

$ git@github.com:simonbrent/nuxt-vue-meta-bug.git
$ cd nuxt-vue-meta-bug
$ npm install
$ npx nuxt

• Open the site in Chrome, with dev tools open to the navigation tab
• Click on the link to "foo" - see that "head-script.js" is downloaded
• Click on the link to "index"
• Click on the link to "foo" - see that "head-script.js" is downloaded again

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

[pimlie]

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 once for a workaround

[pimlie]

Wait, I only noticed now you are using vmid in your project as identifier. But as you are using Nuxt you should be using hid

[simonbrent]

@pimlie I have updated the repo to use hid and once, so that the code is now:

    head: () => ({
      script: [{
        hid  : 'head-script',
        src  : '/head-script.js',
        once : true,
      }],
    }),

Neither change made any difference to the behaviour.
I have also tried using once with a stylesheet, as shown in the docs you linked to:

    head: () => ({
      script: [{
        hid  : 'head-script',
        src  : '/head-script.js',
        once : true,
      }],
      link: [{
        hid  : 'head-style',
        rel  : 'stylesheet',
        href : '/head-style.css',
        once : true,
      }],
    }),

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.

[stale]

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:

1. Verify that you can still reproduce the issue in the latest version of vue-meta
2. Comment the steps to reproduce it
   Issues that are labeled as pending will not be automatically marked as stale.

[simonbrent]

There have been no new releases since I reported this issue so it is not fixed and not stale

[pimlie]

Could you create a working repro on codesandbox please?

[simonbrent]

https://codesandbox.io/s/github/simonbrent/nuxt-vue-meta-bug

[pimlie]

Thanks, seems like once isnt working as it should indeed.

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
    }),

[simonbrent]

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:

head: function () {
  return (
    global.foo
      ? {}
      : {
        script: [{
          vmid: 'foo',
          src: '/foo.js',
        }],
      }
  );
},

[stale]

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:

1. Verify that you can still reproduce the issue in the latest version of vue-meta
2. Comment the steps to reproduce it
   Issues that are labeled as pending will not be automatically marked as stale.

[simonbrent]

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