Vue3 lib not working in Vue2 projects

First of all, I saw a couple of issues that involved more or less the same issue, but I tought it would be useful to group everything into one issue, so we could hopefully try to solve it.

Related issues:

• #145
• #136
• #117
• #129

Problem

I’m currently building a private reusable package for a real-world application. This application runs on nuxt2 (currently nuxt-bridge), and we’re planning to migrate to nuxt3 when all the packages we need are there. The idea was to build that reusable package in vue3, and use vue-demi to make it possible to be used in our nuxt-bridge app.

At first I just tried building the library and use it in a separate vue 3 app. With Vite it was really fast & easy to make it work 🎉

However when I tried importing it in our nuxt-bridge app I came across several issues:

1. When externalising vue dependency in vite, I got a list of warnings that some functions are not exported by vue. This is what the most issues are about.

2. When I don’t externalise vue in vite.config.js, I just get an empty component. In my repro I don’t get any warning. I just see an anonymous component in my dev tools. In my production nuxt-app, I see the following error: no template or render function is defined. The component seemed to be imported correctly, it just doesn’t render any HTML.

3. I saw in other issues that the solution might be to externalise vue-demi as well, but that doesn’t seem to make any difference for this.

4. also tried using npx vue-demi-fix && npx vue-demi-switch 2 commands, but these also doesn’t seem to be changing a whole lot.

I also saw that in #117 , @koooge researched into the issue a bit and saw that it might be due to a breaking change in @vue/core.

That’s when I decided to build a repro with a vue2 app (@vue/cli), vue3 app (vite) and a simple component in a separate lib.

Repro

https://github.com/jclaessens97/vue-demi-vue2-broken-repro

I hope we can look into this issue and try to come up with a solution to be able to make vue3 components compatible for vue2, until everything is vue3 ready.

[jclaessens97]

@LinusBorg answered me on Discord saying the following:

As said, might be useful to have in the README.md to avoid future issues about this topic 😄 I’m coming back on it on Tuesday.

[GUGIG]

I published a public repo & its npm package. repo link It’s a demo package to showcase how I managed to make a vue component library compatible with both vue 2 & 3.