Props based on route generate hydration missmatch

[patent burrow]

// /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?

[viscid plume]

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

[patent burrow]

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

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

Which is probably what causes the issue

I'll need to rethink this step

[viscid plume]

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