Why do tags stay despite route change?

[Travis]

I have a very simple vue 3 app + vite + vue-router.

If I have some route with a tag:

    useHead({
      meta: {
        robots: 'noindex',
      },
    });

And I navigate to another route, the tag remains and never gets removed.

I noticed it also does this for titles and descriptions and such.

PS I realize below I'm using templates wrong, its intentional to prevent the 300ms lag thats produced

Home

    useHead({
      templateParams: {
        site: {
          name: 'CompanyName',
        },
        separator: '·',
      },
    });

ViewPage

    useHead({
      titleTemplate: 'About Us %separator %site.name',
    });

[Harlan Wilton]

Hi @9mm, thanks for the issue.

The useHead context should be tied to whatever Vue component you use it in, when the component unmounts it should remove head data.

As far as I know this works correctly, would you be able to provide a reproduction?

[Travis]

@harlan-zw sure. Sorry about the format, code sandbox is... beyond infuriating. I wasted like an hour just trying to get it to work, and tried like 5 different versions of it. I dont think it likes vite at all.

Steps to reproduce:

1. yarn install
2. yarn dev
3. visit http://localhost:5173/aefijawioefjwaef (the 404 wildcard route)
4. open dev tools, and notice that robots noindex is in the head
5. click the about link
6. notice that noindex is still in the head

test.zip

[Harlan Wilton]

@harlan-zw sure. Sorry about the format, code sandbox is... beyond infuriating. I wasted like an hour just trying to get it to work, and tried like 5 different versions of it. I dont think it likes vite at all.

Steps to reproduce:

1. yarn install
2. yarn dev
3. visit http://localhost:5173/aefijawioefjwaef (the 404 wildcard route)
4. open dev tools, and notice that robots noindex is in the head
5. click the about link
6. notice that noindex is still in the head

test.zip

Thanks! For future reference I'd recommend using StackBlitz over CodeSandbox, it has good Vite support.

I looked into the issue and it seems to be because you're importing the composables from unhead. The unhead module has a different context than @vueuse/head. This is because it's not reactive and doesn't have any lifecycle events, unlike Vue.

So to recap when using useHead or useSeoMeta make sure you import from @vueuse/head if you want lifecycle events

import { useSeoMeta } from '@vueuse/head'';

I'd also recommend just using @unhead/vue directly instead of @vueuse/head, the API is exactly the same except it doesn't provide support for composables and will be smaller in size.

I'll close for now but feel free to let me know if any of this isn't clear.

[Travis]

Hmm yeah I suppose that was pretty stupid. The reason I did that is because I couldn't get it to import, and forgot I did that.

As a sidenote, do I need this? I read something about greatly reducing file size which would be of interest to me, but I don't know if it would mess something up.

import UnheadVite from '@unhead/addons/vite'; 

  plugins: [
    vue(),
    svgLoader({ defaultImport: 'component' }),
    UnheadVite(),
  ],

[Travis]

Thats awesome it works btw, thanks! I remember when I first installed this library I messed with it for a long time following the docs and kept getting eslint errors about hanging dependencies, and other times importing it wouldnt work. I dont remember exactly what it was.

I think it is confusing because of all the @ not matching the package im actually installing, and then I dont know how this relates to vueuse/core. So when i followed the docs 1:1 I believe thats when it generated errors, and I tried other combinations of removing the @ and linking to unhead/vue, etc etc. Exactly what you put though works perfect!

[Harlan Wilton]

Hmm yeah I suppose that was pretty stupid. The reason I did that is because I couldn't get it to import, and forgot I did that.

As a sidenote, do I need this? I read something about greatly reducing file size which would be of interest to me, but I don't know if it would mess something up.

import UnheadVite from '@unhead/addons/vite'; 

  plugins: [
    vue(),
    svgLoader({ defaultImport: 'component' }),
    UnheadVite(),
  ],

It can help reduce your bundle size, although it won't be too siginicant. (~3-4kbs maybe).

Thats awesome it works btw, thanks! I remember when I first installed this library I messed with it for a long time following the docs and kept getting eslint errors about hanging dependencies, and other times importing it wouldnt work. I dont remember exactly what it was.

I think it is confusing because of all the @ not matching the package im actually installing, and then I dont know how this relates to vueuse/core. So when i followed the docs 1:1 I believe thats when it generated errors, and I tried other combinations of removing the @ and linking to unhead/vue, etc etc. Exactly what you put though works perfect!

Yes I forgot to mention in my first reply, that the docs need some improvement to avoid tripping up others in the future.

[Travis]

Oh, here was another line that i had to disable eslint, i thought this was weird that it couldnt find it...

import UnheadVite from '@unhead/addons/vite';

It says unable to resolve path, yet it builds fine. Is that doing it in some weird non-standard way or something?

[Harlan Wilton]

This uses node export maps from package.json, not sure why the types aren't working for you but it's a valid import.

WIll need to investigate further

[Travis]

cool, thanks! and great work, it works perfect now