You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The Vue context (client and server) in which Nuxt plugins, route middleware, components, pages, etc. run
What is available in these two different contexts is dramatically different, although in some cases utilities can be imported in both places, or shared between them:
Same utility. In some cases the same utility can be used in each context. We are currently discussing whether to support h3's createError in the Vue portion of the app in feat(nuxt): improve error dx for users framework#4539, for example.
Different utilities with same name and signature. useRuntimeConfig() has a same name and DX but is a different utility in Nitro and Vue.
Utilities that are only available in one context. For example, defineEventHandler or defineComponent.
Different utilities with same name but different signature. For example, useCookie.
For 1 and 2, we don't have an issue. But for 3 and 4, we have the problem that users may use the 'wrong' import, either because it isn't provided via auto-imports in the context in which they are using it, or because it won't work in that context. Even worse, they may import directly from #app in a server context, or try to import from nitro in a Vue context.
There are a number of potential ways to resolve this and this issue exists for discussion of these and other potential solutions. They are not mutually exclusive.
Provide clearer hints in the naming of composables (e.g. defineServerCookie).
Ensure there is either a common signatures or different names for functions.
Provide runtime checks (which we currently do through import protection).
Provide separate TypeScript environments so IDEs can recognise differences.
I think case for (1), is the most urgent to resolve by adding server prefix for alias (here) (solution 1) and in the longer term we can introduce them back with same signature (2) using implicit context via unctx in server routes.
Regarding environment safely, I belive we need to somehow merge two instances of unimport (nuxt and nitro) to be aware of each other and generate proper error or a mock that throws error when using auto imports with the wrong file context (/cc @antfu can we please have an issue for this)
Having greater typescript safely for filtering #imports is also a nice idea but runtime+buildtime safetely is probably much more important to have at first. Consider we need to properly try IDE integration and also update module-builder to adhere same convention for hinting types from src/runtime/server.
In a Nuxt app, there are two different contexts:
What is available in these two different contexts is dramatically different, although in some cases utilities can be imported in both places, or shared between them:
createError
in the Vue portion of the app in feat(nuxt): improve error dx for users framework#4539, for example.useRuntimeConfig()
has a same name and DX but is a different utility in Nitro and Vue.defineEventHandler
ordefineComponent
.useCookie
.For 1 and 2, we don't have an issue. But for 3 and 4, we have the problem that users may use the 'wrong' import, either because it isn't provided via auto-imports in the context in which they are using it, or because it won't work in that context. Even worse, they may import directly from
#app
in a server context, or try to import from nitro in a Vue context.There are a number of potential ways to resolve this and this issue exists for discussion of these and other potential solutions. They are not mutually exclusive.
defineServerCookie
).Other ideas are welcome!
Related: #13713
cc: @pi0, @Atinux, @antfu
The text was updated successfully, but these errors were encountered: