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

[danielroe]

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

• Vue compile doesn't work properly in any case #13530
• Production build + custom vue lib + ssr #13117
• HeadlessUI is not working with Nuxt 3 #12996
• 500 Cannot read property 'panelId' of undefined #13500
• Unable to use heroicons & headlessui while deploying in Production #13352
• Errors when using a Vue components library using defineNuxtModule and third party dependencies #13176

[zefman]

Hi @danielroe should adding the library to build.transpile always fix the issue? I have a custom component library setup with pnpm alongside Nuxt in a mono repo and still face issues even after adding to the transpile array. The component library is very simple using vite to bundle with vue externalised etc.

[fabis94]

My concern about option 1 is that it's going to increase the runtime of the build. And considering that there are going to be many packages that have vue as a dependency, it seems like one might need to transpile many packages.

[dakt]

We have same issue in our project with dev erroring out:

[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Unhandled error during execution of setup function
  at <RouterLink to="typography" activeClass=undefined exactActiveClass=undefined  ... >
[nuxt] [request error] Cannot destructure property 'options' of 'vue.inject(...)' as it is undefined.

This is only when we slot <Nuxt* /> components through our UI lib like this:

<UIProvider theme="foo">
  <NuxtLink to="foobar">Foobar</NuxtLink>
</UIProvider>

but works fine in this scenario:

<UIProvider theme="foo">
  <h1>Hello World</h1>
</UIProvider>

build.transpile does nothing for us since it's probably not working in monorepo for some reason.

[zefman]

@dakt Interesting you are in a monorepo too, it does sound like build.transpile doesn't work in monorepos.

I would be really interested if you find a solution! This is a pretty big blocker for us at the moment and is ruining our otherwise lovely monorepo setup haha

[dakt]

@zefman

Didn't spend much time trying to figure out why built.transpile wont work, but we managed to make the project which is using our UI lib to work. We just did whole monorepo cleanup (remove all build/dev artefacts) and used `pnpm --shamefully-hoist' to install Nuxt dependencies. This caused all Nuxt's deps to bubble up flat in node_modules and probably allowed implicit dependencies to be resolved / imported.

[zipme]

hi @danielroe , it still happens with

experimental: {
  externalVue: true,
},

[danielroe]

@zipme Would you be able to share a reproduction? 🙏

[zipme]

@danielroe oh sorry, I was meant to comment on this issue #13117. It turned out I have different vue version set in different packages, once I unified them the problem went away.

[Lilja]

@danielroe I was able to add experimental: { externalVue: true } to the reproduction in #13117, still got the same issues.

[P4sca1]

@danielroe Were there any recent changes regarding this topic? Because we noticed, that you are required to add @headlessui/vue to build.transpile again.
More context: P4sca1/nuxt-headlessui#13

[danielroe]

No, there should not be a change. There might have been a change in vite or nitro bundling though, so if you are happy to raise a new issue, we can look to resolve it.

[justwiebe]

I'm also having problems importing a Vue 3 component library that uses composition API.

I tried adding the component to build.transpile and setting experimental.externalVue and it's still not working

[justwiebe]

This was fixed for me by removing all of the import { ... } from 'vue' from my library. Are we not supposed to import things from vue?

[danielroe]

we are now handling dependencies as external by default