New to Vue and stack...please be gentle...
Problem/question: Recently implemented a Suspense wrapper at the view level and lost ability to use props passed through to the component level. If I remove Suspense at the view level then my component level code receives the prop value but if I add Suspense to the view level then the prop value in the component is not defined. Why?
Given current approach I would like the prop value and to be able to use async setup. Is this not possible?
The error message I get when Suspense is used is: [Vue warn]: Extraneous non-props attributes (lId) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
Background and code:
I implemented a wrapper around a view level component because it was required to use async setup() within the component contained (ex: component has a composable call requiring await to get data critical to remaining step, etc).
Is the issue related to async setup? Meaning, if you use async setup(props) vs setup(props) do you lose the ability to inherit props value?
ROUTER CODE:
{
path: '/events/:lId',
name: 'events',
component: Home,
beforeEnter: requireAuth,
props: true
},
VIEW LEVEL:
<template>
<Suspense>
<template #default>
<EventDash />
</template>
<template #fallback>
Loading...
</template>
</Suspense>
</template>
<script>
import EventDash from '@/components/EventDash.vue'
export default {
name: 'home',
components: { EventDash }
}
</script>
COMPONENT LEVEL (relevant snippet from EventDash):
export default {
name: "eventDash",
props: ["lId"],
async setup(props) {
console.log('prop', props.lId) // undefined when Suspense used at view level
// get user default location
const userHome = await getUserHome()
...do other stuff reliant on userHome value
Related posts I found that were either unanswered or did not solve include:
vue3 how to use suspense passing async props to component
How to use vue 3 suspense component with a composable correctly?
Any advice/enlightenment appreciated.
[EDIT] TRIMMED COMPONENT LEVEL TO FURTHER ILLUSTRATE:
export default {
name: "eventDash",
props: ["lId"],
async setup(props) {
console.log('prop', props.lId) // undefined when async
}
}
-vs-
export default {
name: "eventDash",
props: ["lId"],
setup(props) {
console.log('prop', props.lId) // DEFINED
}
}
