Nuxt•2y 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?

manniL•6/1/24, 11:41 AM

as it is based on a JSON, it should be filled either way.

manniL•6/1/24, 11:41 AM

try without the component and just render the param. Most likely an issue inside the component

cosbgnOP•6/1/24, 11:57 AM

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

Which is probably what causes the issue

cosbgnOP•6/1/24, 11:57 AM

I'll need to rethink this step

manniL•6/1/24, 11:58 AM

so you'd rather need and then use that ref with the initial value for a v-model or similar

manniL•6/1/24, 11:58 AM

no onBeforeMount needed

cosbgnOP•6/1/24, 12:02 PM

Amazing, thanks