Can I update a variable within the Head based on the current route?

[Cody Bontecou]

I'm attempting to do something like:

const route = useRoute()
const currentRoute = ref(route)

watch(route, (newRoute, oldRoute) => {
  currentRoute.value = newRoute.path
})

useHead({
  script: [
    {
      async: 'true',
      src: 'https://utteranc.es/client.js',
      repo: 'codybontecou/blog',
      theme: 'github-dark',
      crossorigin: 'anonymous',
      'issue-term': computed(() => currentRoute.value.path),
    },
  ],
})

But this isn't working. The goal is to update a script's param within my app's head. Is this possible?

[Biya Paul]

I tried something similar but for change dynamically all the meta tag according to the current route.
I used the same approach but used watch hook differently. So maybe you can try this

const route = useRoute()
const currentRoute = ref(route)

watch(
  () => route.path, // use function instead
  async (routePath) => {
    if (routeName) {
      currentRoute.value = routePath
    }
  },
  { immediate: true } // Add this too
)

useHead({
  script: [
    {
      async: 'true',
      src: 'https://utteranc.es/client.js',
      repo: 'codybontecou/blog',
      theme: 'github-dark',
      crossorigin: 'anonymous',
      'issue-term': computed(() => currentRoute.value.path),
    },
  ],
})

[Harlan Wilton]

Have done some testing on this and it seems the reactivity is working correctly.

However, it seems like that particular script will remove the tag when it's loaded in, so it's going to cause issues. You should see if they have an SPA supported version.

This is the code sample I used to test reactivity with Nuxt for reference

useHead({
  script: [
    {
      async: true,
      src: '/client.js',
      repo: 'codybontecou/blog',
      theme: 'github-dark',
      crossorigin: 'anonymous',
      'issue-term': computed(() => useRoute().path),
    },
  ],
})

Will close this off for now