✔️ Deploy Preview for nuxt3-docs canceled.

🔨 Explore the source changes: 9e35588

🔍 Inspect the deploy log: https://app.netlify.com/sites/nuxt3-docs/deploys/61923582e53c6a000757d53a

It would be nice to implement for Nuxt3 before closing linked issue since:

• vue-demi as I could understand uses a postinstall hook to detect version and copy impl which can go wrong in some edge cases (like when using both nuxt2 and nuxt3 in monorepo) while in Nuxt 3 during build we are absolutely sure it is vue3 or vue2
• Same flags can be available even as global auto imports since it is going to be a common asset for module authors and vue-demi idea is already amazing only we could make it more stable in Nuxt's context

(We can do above in another PR 👍)

Added the mock for Nuxt 3, not sure what's the best place to set the alias, feel free to modify.

Also converting to draft for now, I will need to do some tests for it.

Love your changes!

However I guess this is a bit tricky, in my testing, our mock does not take effects for @vueuse/core since it's been pre-optimized by vite (so the aliasing is not working), would only work when I exclude them:

optimizeDeps: {
  exclude: [
    '@vueuse/core',
    '@vueuse/shared',
    'vue-demi'
  ],
}

I don't think it's flexible as we can't possibly list all the packages that use vue-demi. Some idea:

• Disable the bundling feature of vite, which would be fine for most of the modern packages that only ship one single js file, but would cost the perf when user importing things like lodash.
• We let this to library integration library to extend the vite config then exclude themselves (I can do in VueUse and I think Pinia could do as well).

Good points @antfu!

Well indeed this mocking solution only works for transpired dependencies to mitigate compatibility issues and certainly, we cannot prevent all problematic cases. (however, there is now a escape path :D)

It makes sense to include vue-demi to optimizeDeps.exclude array by default and let module authors add by need.
(Related: Basically, the way to config a library being inlined, is by pushing to options.build.transpile that affects all different places to ensure lib is bundled and transpired. We shall add build.transpile to optimizeDeps.exclude by default I think)

Regarding pinna's Nuxt module, I made a rewrite PR (vuejs/pinia#791) that splits the vue2 plugin from vue3. But I can see for @vueuse/* case, it is almost impossible however I can see you are prebundling so I guess the impact of including it in optimizeDeps.exclude would be low.

That makes sense. Then I think we could merge it and I will do the exclusion on VueUse.