How do you handle JSON-LD with Vue3 and Inertiajs ? #1424
-
|
Hello, Is there a way to use JSON-LD with Inertiajs and Vue3 so that it works both clientside and SSR ? Here is an example from fresh Laravel project with Breeze Vue+SSR starterkit. After running
However when I run When I remove the Head tags and append it to the Body section the situation gets kinda flipped.
However it would be cool to get it working in both and preferably add it into the Head section. It's possible to teleport that script into the head section but it won't work on SSR. I would really appreciate any ideas on this. JSON-LD is much more convinient than Microdata. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments
-
|
Hey @stormtomz0 - I'm running into the EXACT issue you mention above. Did you ever find a solution? |
Beta Was this translation helpful? Give feedback.
-
|
I don't know if this helps, mainly because of the time that has passed. What I did to make it work both on SSR and on the client side with Google is to create the Head tag when I'm in SSR. Then, when it renders on the client, I create a Teleport tag that points to the head. This is an example of a project I'm working on. <script setup>
import { computed } from 'vue';
const inSSR = computed(() => typeof window == 'undefined');
...
</script>
<template>
<Head v-if="inSSR">
<component is="script" type="application/ld+json">
{{
$seo.makeProduct({
name,
urlImage,
description,
urlOffer,
price,
priceCodeIso,
})
}}
</component>
</Head>
<template v-else>
<Teleport to="head">
<component is="script" type="application/ld+json">
{{
$seo.makeProduct({
name,
urlImage,
description,
urlOffer,
price,
priceCodeIso,
})
}}
</component>
</Teleport>
</template>
</template>
|
Beta Was this translation helpful? Give feedback.
-
|
This has been fixed in v1.0.9. |
Beta Was this translation helpful? Give feedback.
This has been fixed in v1.0.9.