Can I update a variable within the Head based on the current route?
CodyBontecou opened this issue · comments
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?
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),
},
],
})
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