Nuxt•2mo ago

End-to-end typesafe for API not working in nuxt 4

Hi, I tried to upgrade to nuxt 4 to get a better code structure, but the end-to-end typesafe for API route is not working any more as soon as I move code to the app folder. Before: nuxt3 https://github.com/CodyBontecou/nuxt-e2e-typesafety After: nuxt 4 https://github.com/phi0411141/nuxt-e2e-typesafety API in app/app.vue now has type unknown. Any help is appreciated, thank you a lot!

GitHub

GitHub - CodyBontecou/nuxt-e2e-typesafety

Contribute to CodyBontecou/nuxt-e2e-typesafety development by creating an account on GitHub.

GitHub

GitHub - phi0411141/nuxt-e2e-typesafety

Contribute to phi0411141/nuxt-e2e-typesafety development by creating an account on GitHub.

4 Replies

kapa.ai•2mo ago

Hi @phipham. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you might find the Nuxt Upgrade Guide helpful for understanding changes in Nuxt 4, especially regarding directory structure and type safety. If you encounter specific issues, consider checking the Nuxt GitHub issues for similar problems or reporting a new issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Cue•2mo ago

@phipham In v4, ~ points to <workspace>/app and ~~ points to <workspace>...

// server/api/user.get.ts
- import { User } from '~/types'
+ import type { User } from '~~/types'

// server/api/user.get.ts
- import { User } from '~/types'
+ import type { User } from '~~/types'

phiphamOP•2mo ago

Thanks @cuebit , just found the cause, if you imports defineEventHandler from "#imports", it will not be able to retrieve the route types, I have to switch to import from 'h3' instead, not sure if it is best practice.

- import {defineEventHandler} from "#imports"
+ import {defineEventHandler} from "h3"

- import {defineEventHandler} from "#imports"
+ import {defineEventHandler} from "h3"

Actually I am not a fan of auto in vue/nuxt ecosystem, which causes a lot of troubles, there is no import path in any of the examples, save a few keystrokes (with IDE auto-import) in exchange of days of debugging ^^

Gaming

Programming

End-to-end typesafe for API not working in nuxt 4

Did you find this page helpful?