Fix <Head> fragment detection in Vue 3 adapter
#1509
Conversation
In development builds, a `v-for` array is received by the `renderNodes` function as type "Symbol(Fragment)" which is correctly detected. However, in production builds, this same array is received as "Symbol()". This results in the `v-for` array of Head elements being discarded.
|
@craigrileyuk Thanks for catching and fixing this! 🙏 |
reinink
changed the title
<Head> fragment detection in Vue 3 adapter
|
@reinink @craigrileyuk after update I get this error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toString')
at Proxy.renderTag (head.ts:65:21)if (node.type.toString() === 'Symbol(Text)') { |
|
After digging into the issue, it works fine prior vue <= v3.2.47 and breaks in v3.3.0 |
|
Yeah. Vue seems to have made a major change to its vNode type property. Currently the Head component can’t handle comment tags or other Vue components (e.g. if you tried to use If no one gets to it before the weekend, I’ll give it a proper refactor. Until then, a workaround is to avoid anything that can cause a comment (e.g v-if) |
|
Hi @craigrileyuk I think this is related: vuejs/core#4733, will check it more. |
|
I'm running Or perhaps I'm having a separate issue entirely... When I add |
|
I guess this #1570 PR by @craigrileyuk fixes this issues |
|
Having the same issue when trying to get my Breadcrumbs schema rendering in the head. All working before Vue 3.3. <template>
<Breadcrumbs
:items="breadcrumbs"
class="my-1 px-2"
link-mode="inertia"
v-if="breadcrumbs.length > 1"
/>
<Head>
{{ breadcrumbsSchema }}
</Head>
</template>
<script setup>
import { Breadcrumbs } from "../";
import { usePage, Head } from "@inertiajs/vue3";
import { computed } from "vue";
const breadcrumbs = computed(() => usePage().props.breadcrumbs);
const breadcrumbsSchema = computed(() => {
return usePage().props.breadcrumbsSchema;
});
</script> |
|
This fixed has been released as part of v1.0.8 👍 |
|
Hey, this doesn't fix the issue when trying to add JSON schema to Component which adds JSON schema. <template>
<Head>
{{ breadcrumbsSchema }}
</Head>
</template>
<script setup>
import { usePage, Head } from '@inertiajs/vue3'
import { computed } from 'vue'
const breadcrumbsSchema = computed(() => usePage().props.breadcrumbsSchema)
</script>JSON schema passed through via HandlesInertiaRequests middleware. This works up with the most recent inertia version. However, Vue needs to be pinned below 3.3. Perhaps there's a better way to add JSON Schema to the head? |
Vue doesn't like the use of A far better option is to VueUse's useScriptTag and use it inside your layout component. |
|
Hey, I did think of this. However this wouldn’t be server side rendered. And since the purpose of using JSON schema here is to help search engines by supplying meta data about breadcrumbs, I feel it should probably be server side rendered. Also I think VUE only has a problem with script and style tags directly in your template for parsing reasons right? It should be fine to render it like this. |
|
Did either of you figure this out? @olieady @craigrileyuk @SergkeiM Need to have ld+json rendered via SSR. |
|
This issue was fixed in a later version. Here's what my Breadcrumbs component looks like: <template>
<div>
<Breadcrumbs
:items="breadcrumbs"
class="my-1 px-2"
link-mode="inertia"
v-if="breadcrumbs.length > 1"
/>
<Head>
{{ breadcrumbsSchema }}
</Head>
</div>
</template>
<script setup>
import { Breadcrumbs } from '@babestationui/vue'
import { usePage, Head } from '@inertiajs/vue3'
import { computed } from 'vue'
const breadcrumbs = computed(() => usePage().props.breadcrumbs)
const breadcrumbsSchema = computed(() => {
return usePage().props.breadcrumbsSchema
})
</script> |
To be honest I switched to unhead |
In development builds, a
v-forarray is received by therenderNodesfunction as type "Symbol(Fragment)" which is correctly detected. However, in production builds, this same array is received as "Symbol()". This results in thev-forarray of Head elements being discarded.