Way to de-duplicate existing meta inside of html head

[719media]

When using the (seemingly now-deprecated) vue-meta, there was a way to tie into existing meta tags when mounting vue.

Specifically, you could add an attribute, e.g. vmid ( see https://vue-meta.nuxtjs.org/faq/#unique-metadata )

<meta name="description" data-vmid="some_unique_value" content="This is blue.">

And then when using vue w/ vue-meta, you could reference this meta like so:

head() {
  return {
    meta: [{
      'vmid': 'some_unique_value',
      'name': 'description',
      'content': 'This is red.'
    }]
  };
}

And the meta tag would be replaced, as you would expect.

However, in vueuse/head, I don't see that such an option exists. I see that there is a reference to "key", but this only works if the meta you are replacing was created using vueuse/head in the first place, and not for previously existing meta.

[719media]

At one point this was merged as a PR (https://github.com/vueuse/head/pull/28/files), but the codebase no longer loops over "existing" head meta from what I could see, so this previously working (at one time) functionality no longer works.

[719media]

Looks like commit 5ef9b62 removed the use of "uncontrolledElements" array which was previously handling this behavior.

[719media]

I ended up solving this by putting data-vueuse-head on the raw index.html meta attribute:

<meta data-vueuse-head name="description" content="Raw description">

And then in the app.vue file, setting that same "Raw description" so I now have control over it inside of vueuse/head

setup() {
  const elementsToRemove = document.head.querySelectorAll('[data-vueuse-head]');
  [...elementsToRemove].forEach((elementToRemove) => {
    elementToRemove.parentNode.removeChild(elementToRemove);
  });
  
  useHead({
    meta: [
      {
        name: 'description',
        content: 'Raw description',
      },
    ],
  });
}

And now I can use useHead as normal in other page components and have it work accordingly.