Nuxt•14mo ago•

5 replies

Type safe props with `NuxtPage`

Hello,

My pages are structured something like this:

team/
├─ [id].vue
├─ [id]/
│  ├─ index.vue

team/
├─ [id].vue
├─ [id]/
│  ├─ index.vue

[id].vue

[id].vue

I fetch a user, show a header and render a

<NuxtPage>

<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

[id].vue

looks something like this:

<script setup lang="ts">
const {data: user} = useFetch('/api/user')
</script>
<template>
  <PageHeader />
  <NuxtPage :user />
</template>

<script setup lang="ts">
const {data: user} = useFetch('/api/user')
</script>
<template>
  <PageHeader />
  <NuxtPage :user />
</template>

all the files in

[id]/

[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>

<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

strictTemplates

and

fallthroughAttributes

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

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

Nuxt•14mo ago•

5 replies

Mike

Type safe props with `NuxtPage`

Hello,

My pages are structured something like this:

team/
├─ [id].vue
├─ [id]/
│  ├─ index.vue

team/
├─ [id].vue
├─ [id]/
│  ├─ index.vue

[id].vue

[id].vue

I fetch a user, show a header and render a

<NuxtPage>

<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

[id].vue

looks something like this:

<script setup lang="ts">
const {data: user} = useFetch('/api/user')
</script>
<template>
  <PageHeader />
  <NuxtPage :user />
</template>

<script setup lang="ts">
const {data: user} = useFetch('/api/user')
</script>
<template>
  <PageHeader />
  <NuxtPage :user />
</template>

all the files in

[id]/

[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>

<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

strictTemplates

and

fallthroughAttributes

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

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

Type safe props with `NuxtPage`

Similar Threads

Type safe props with `NuxtPage`

Similar Threads

Similar Threads

Similar Threads