NuxtN
Nuxt•12mo ago
Mike

Type safe props with `NuxtPage`

Hello,

My pages are structured something like this:
team/
├─ [id].vue
├─ [id]/
│  ├─ index.vue

In [id].vue I fetch a user, show a header and render a <NuxtPage> with the fetched user as a prop. I do this to avoid having to fetch the user on all sub pages, since they all need it.
So my [id].vue looks something like this:
<script setup lang="ts">
const {data: user} = useFetch('/api/user')
</script>
<template>
  <PageHeader />
  <NuxtPage :user />
</template>

all the files in [id]/ then start out something like this:
<script setup lang="ts">
import type { User } from "~/types/user"

const user = computed<User>(
  () => useAttrs().user as User,
)
</script>


Now my question is, how can I make this type safe? I have enabled strictTemplates and fallthroughAttributes but I am getting this type error when compiling:
error TS2353: Object literal may only specify known properties, and 'user' does not exist in type 'Partial<{ keepalive: boolean | KeepAliveProps; transition: boolean | TransitionProps; pageKey: string | ((route: RouteLocationNormalizedLoaded) => string); }> & Omit<...>'.

153   <NuxtPage :user :status />

Full type safety would be great but a way to silence this error would also work
Was this page helpful?