Nuxt•4w ago

Props set on route contains an extra default key

Hi all I'm migrating a Vue 3 SSR project to Nuxt and I'm seeing a different behavior when defining the props on a route. e.g:

{
    name: 'vertragsauswahl',
    path: '/vertragsauswahl',
    components: {
        default: () => import('~/components/ContractSelection/ContractSelection.vue'),
    },
    meta: {
        trackingId: 'ContractSelection',
        layout: 'MasterLayout',
        isRestricted: true,
        middleware: [...PROTECTED_MIDDLEWARE_LIST],
    },
    props: {
        default: contractSelectionStaticContent,
        servicesheet: contractSelectionStaticContent,
    },
},

{
    name: 'vertragsauswahl',
    path: '/vertragsauswahl',
    components: {
        default: () => import('~/components/ContractSelection/ContractSelection.vue'),
    },
    meta: {
        trackingId: 'ContractSelection',
        layout: 'MasterLayout',
        isRestricted: true,
        middleware: [...PROTECTED_MIDDLEWARE_LIST],
    },
    props: {
        default: contractSelectionStaticContent,
        servicesheet: contractSelectionStaticContent,
    },
},

When checking the data from the route on Nuxt this is generating

props: {
    default: {
        default: {
            id: 'some-id',
            name: 'some-name',
            type: 'some-type',
            value: 'some-value'
        },
        servicesheet: {
            id: 'some-id',
            name: 'some-name',
            type: 'some-type',
            value: 'some-value'
        }
    }
}

props: {
    default: {
        default: {
            id: 'some-id',
            name: 'some-name',
            type: 'some-type',
            value: 'some-value'
        },
        servicesheet: {
            id: 'some-id',
            name: 'some-name',
            type: 'some-type',
            value: 'some-value'
        }
    }
}

instead of

props: {
    default: {
        id: 'some-id',
        name: 'some-name',
        type: 'some-type',
        value: 'some-value'
    },
    servicesheet: {
        id: 'some-id',
        name: 'some-name',
        type: 'some-type',
        value: 'some-value'
    }
}

props: {
    default: {
        id: 'some-id',
        name: 'some-name',
        type: 'some-type',
        value: 'some-value'
    },
    servicesheet: {
        id: 'some-id',
        name: 'some-name',
        type: 'some-type',
        value: 'some-value'
    }
}

I do also have a prop where I do props: true but when rendering the route I get a warning saying that the required prop is undefined Anyone has an idea of what's going on? Thanks

3 Replies

kapa.ai•4w ago

Hi @Victor Neves. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I don't have enough specific details to fully explain the behavior you're experiencing with props in Nuxt. However, I can provide some insights and suggestions based on related information: 1. Props Destructuring: Nuxt 3 has recently added support for props destructuring with default values. This feature can be enabled by setting propsDestructure: true in your Nuxt config Github Issue (https://github.com/nuxt/nuxt/issues/28829). While this doesn't directly address your issue, it's worth noting as it relates to props handling in Nuxt. 2. Vue 3 Migration: Since you're migrating from Vue 3 SSR to Nuxt, it's important to be aware that there are differences in how Vue and Nuxt handle certain features. The Vue 3 migration guide (https://v3-migration.vuejs.org) might provide some insights into changes that could affect props behavior Nuxt Docs (https://nuxt.com/docs/migration/configuration#vue-changes). 3. Hydration Mismatch: The warning about undefined required props could potentially be related to hydration mismatches between server-side rendering and client-side hydration. This can happen if data is modified during the rendering process Stack Overflow (https://stackoverflow.com/questions/77900809). 4. Router View Depth: The structure you're seeing with an extra default key might be related to how Nuxt handles nested router views. However, without more context, it's difficult to say for certain Github Issue (https://github.com/nuxt/nuxt/issues/28879). To troubleshoot this issue: 1. Double-check your route configuration to ensure it matches Nuxt's expected format. 2. Verify that your contractSelectionStaticContent is structured as expected. 3. Consider using Vue DevTools or Nuxt DevTools to inspect the component props at runtime. 4. If the issue persists, it might be worth creating a minimal reproduction of the problem and opening an issue on the Nuxt GitHub repository. If you need more specific guidance, you may want to create a minimal reproduction of the issue and share it on the Nuxt GitHub issues or community forums for more targeted assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@940674295531728938> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Victor NevesOP•4w ago

no one?

Gaming

Programming

Props set on route contains an extra default key