Nook Posts - Answer Overflow

Nook

•Created by Nook on 5/20/2024 in #❓・help

Prevent page from behaving like a nested route

I have the following page structure:

pages/audits
├── [auditId]
│   ├── corrections.vue
│   ├── duplicate.vue
│   ├── grid.vue
│   ├── index.vue
│   └── page
│       └── [pageId].vue
├── [auditId].vue
├── index.vue
└── new.vue

pages/audits
├── [auditId]
│   ├── corrections.vue
│   ├── duplicate.vue
│   ├── grid.vue
│   ├── index.vue
│   └── page
│       └── [pageId].vue
├── [auditId].vue
├── index.vue
└── new.vue

- corrections, grid, index, and page/[pageId] are child routes of [auditId].vue - duplicate is a separate route, and should not inherit from [auditId].vue 's layout. How do you configure Nuxt so that it behaves as described above ? Something I considered was using the following tree structure:

pages/audits
├── [auditId]
│   ├── corrections.vue
│   ├── grid.vue
│   ├── index.vue
│   └── page
│       └── [pageId].vue
├── [auditId].vue
├── index.vue
├── new.vue
└── duplicate
    └── [auditId].vue

pages/audits
├── [auditId]
│   ├── corrections.vue
│   ├── grid.vue
│   ├── index.vue
│   └── page
│       └── [pageId].vue
├── [auditId].vue
├── index.vue
├── new.vue
└── duplicate
    └── [auditId].vue

1 replies

NNuxt

•Created by Nook on 3/27/2024 in #❓・help

useFetch informs the the method is not available for the route

Following this thread https://discord.com/channels/473401852243869706/473406506579263488/1222265282048032872 I managed to narrow down the reproduction of the issue. Given the following tree

server/api
├── audits
│   ├── [auditId]
│   │   ├── index.delete.ts
│   │   └── index.get.ts
│   ├── index.get.ts
│   ├── index.post.ts
│   └── progression.get.ts

server/api
├── audits
│   ├── [auditId]
│   │   ├── index.delete.ts
│   │   └── index.get.ts
│   ├── index.get.ts
│   ├── index.post.ts
│   └── progression.get.ts

and nitro-routes.d.ts

// Generated by nitro
import type { Serialize, Simplify } from 'nitropack'
declare module 'nitropack' {
  type Awaited<T> = T extends PromiseLike<infer U> ? Awaited<U> : T
  interface InternalApi {
    '/api/audits/:auditId': {
      'delete': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/audits/[auditId]/index.delete').default>>>>
      'get': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/audits/[auditId]/index.get').default>>>>
    }
    '/api/audits': {
      'get': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/audits/index.get').default>>>>
      'post': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/audits/index.post').default>>>>
    }
    '/api/audits/progression': {
      'get': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/audits/progression.get').default>>>>
    }
  }
}
export {}

// Generated by nitro
import type { Serialize, Simplify } from 'nitropack'
declare module 'nitropack' {
  type Awaited<T> = T extends PromiseLike<infer U> ? Awaited<U> : T
  interface InternalApi {
    '/api/audits/:auditId': {
      'delete': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/audits/[auditId]/index.delete').default>>>>
      'get': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/audits/[auditId]/index.get').default>>>>
    }
    '/api/audits': {
      'get': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/audits/index.get').default>>>>
      'post': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/audits/index.post').default>>>>
    }
    '/api/audits/progression': {
      'get': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/audits/progression.get').default>>>>
    }
  }
}
export {}

And this code:

const onDelete = async (id: string) => {
  await $fetch(`/api/audits/${id}`, {
    method: 'DELETE',
  })
})

const onDelete = async (id: string) => {
  await $fetch(`/api/audits/${id}`, {
    method: 'DELETE',
  })
})

We receive the following error:

Type '"DELETE"' is not assignable to type '"get" | "GET" | undefined'.ts(2322)
(property) NitroFetchOptions<`/api/audits/${string}`, "get">.method?: "get" | "GET" | undefined

Type '"DELETE"' is not assignable to type '"get" | "GET" | undefined'.ts(2322)
(property) NitroFetchOptions<`/api/audits/${string}`, "get">.method?: "get" | "GET" | undefined

The reason is that /api/audits/${id} is assignable to /api/audits/progression and that's why only the get method is allowed.

1 replies

Gaming

Programming