Nuxt•6mo ago

Props based on route generate hydration missmatch

// /pages/tools/[tool_slug].vue
<template>
    <div>
        <tool :config="tools[tool_slug]" />
    </div>
</template>
<script setup>
import tools from '~/assets/templates/en.json'
const route = useRoute()
const { tool_slug } = route.params
if (!tools?.[tool_slug]?.title) {
    throw createError({ statusCode:404, statusMessage:"Tool not found" })
}
</script>

// /pages/tools/[tool_slug].vue
<template>
    <div>
        <tool :config="tools[tool_slug]" />
    </div>
</template>
<script setup>
import tools from '~/assets/templates/en.json'
const route = useRoute()
const { tool_slug } = route.params
if (!tools?.[tool_slug]?.title) {
    throw createError({ statusCode:404, statusMessage:"Tool not found" })
}
</script>

I want to do something like the above. My issue is that I get a missmatch because confi is empty on server and filled in client. Is there a way to have it filled also on server?

4 Replies

manniL•6mo ago

as it is based on a JSON, it should be filled either way. try without the Tool component and just render the param. Most likely an issue inside the component

cosbgnOP•6mo ago

The issue is that the component needs to v-model the json so I do:

onBeforeMount(() => columns.value = props?.config?.columns)

onBeforeMount(() => columns.value = props?.config?.columns)

Which is probably what causes the issue I'll need to rethink this step

manniL•6mo ago

so you'd rather need const config = ref(tools[tool_slug]) and then use that ref with the initial value for a v-model or similar no onBeforeMount needed

cosbgnOP•6mo ago

Amazing, thanks

Gaming

Programming

Props based on route generate hydration missmatch