handle vue dependencies in nuxt 3 with externals or 'smart' transpilation

Summary

At the moment, in both Bridge & Nuxt 3, we transpile vue. This decreases the space taken up in our server builds, and also protects against multiple instances of Vue being present in development (or even in build, due to ESM resolution issues).

However, it comes with the issue that if the end user adds any libraries or other files (outside of their project) that import vue, we now have multiple copies of Vue present - both the version that has been bundled and an external version in node_modules.

It also means that it is more difficult for users to pick the version of Vue they wish to use in their project (for example, if they want a version with a runtime compiler).

Possible solutions

1. Users can manually add any such libraries to build.transpile - this is our current recommendation.
2. Building on 1, we can also use vite’s dependency graph to detect nested dependencies of vue and recommend adding them to build.transpile
3. We can fully externalise vue, at the cost of greater disk space and the danger of resolving multiple vue versions depending on the ESM status of dependencies.
4. Building on 3, we can also improve our NFT support by adding ‘soft-transpilation’ to optimize/tree-shake externals.

Related issues

• https://github.com/nuxt/framework/issues/3817
• https://github.com/nuxt/framework/issues/2530
• https://github.com/nuxt/framework/issues/2326#issuecomment-1026081414
• https://github.com/nuxt/framework/issues/3688
• https://github.com/nuxt/framework/issues/3162
• https://github.com/nuxt/framework/issues/2682

[zipme]

@danielroe oh sorry, I was meant to comment on this issue https://github.com/nuxt/framework/issues/2530. It turned out I have different vue version set in different packages, once I unified them the problem went away.

[zipme]

hi @danielroe , it still happens with

experimental: {
  externalVue: true,
},