Advise on creating a Vue 2 / Vue 3 compatible component library

[michealroberts]

I have the following library vue3vis: https://github.com/michealroberts/vue3vis that I am importing into a legacy (currently vue 2.7.*) "Naruto" project, which is compiled using Vite.

I've hit my first snag, I'm seeing the following errors:

export 'openBlock' (imported as 'el') was not found in 'vue'

export 'createElementBlock' (imported as 'il') was not found in 'vue'

They seem to be imported in the output build:

import { defineComponent as tl, openBlock as el, createElementBlock as il } from "vue";

So. I guess these aren't named exports in vue 2.7.*.

I've upgraded to the latest Vue 2.7 version., patch version 2.7.13.

I'm wondering if anyone here can provide me specific feedback as to what I have done wrong, and how to correct this seemingly minor issue? I'd be eternally grateful 🙏

[danielroe]

I would recommend shipping/distributing SFCs rather than the output of compiled projects, and then directly using these in the target project. I have a WIP vite plugin for 'compiling' SFC -> distributable SFC (will share later), or you might investigate https://github.com/unjs/mkdist for a 'light transpilation' approach.

If you do want to go for the compiled approach, you might also be interested in https://github.com/JessicaSachs/petite and https://github.com/vue-bridge/vue-bridge.

[LinusBorg]

have a WIP vite plugin for 'compiling' SFC -> distributable SFC (will share later)

👀 @danielroe