it's hard for developer to write a common component with vue-demi

[xuemanchi]

【description】:
I want to try create the same component for Vue2 & Vue3 in the same source code, so I find vue-demi. But.. I have seen some projects likes json-editor-vue. For compact Vue2 & Vue3, I found its source code write render options for 2 & 3. But i think it's hard for developer to code.

I prefer to code in template in a sfc file. So i have some idea(We can smooth the difference with Vue2 & Vue3 when we compile components). Can we write a component with setup & composition-api in a sfc. And then when we compile the component, we can use a series of plugins for Vue2: unplugin-auto-import, unplugin-vue2-script-setup, vite-plugin-vue2, vue-template-compiler@2.6.x, and plugins for Vue3: @vitejs/plugin-vue.

@antfu Maybe u have thought some idea before create this repo. So can u give me some advice or info?

[antfu]

I would suggest directly shipping SFC to npm and let userland plugin to compile it.

[xuemanchi]

I would suggest directly shipping SFC to npm and let userland plugin to compile it.

Thanks for ur reply.
This is also a way to resolve. I think i may find a way to implement .
How about create a monorepo, one package to create SFC, and a package to compile it for Vue2, a package to compile it for Vue3.

[wobsoriano]

Use unbuild for shipping the component directly

[xuemanchi]

Thanks! I will use it for my project.

[rorry121]

Use unbuild for shipping the component directly

@wobsoriano any example?

[sadeghbarati]

I have the same problem, I prefer to code in SFC syntax too

I'm using v-once ( head to JS tab on sfc playground ) directive on SFC component ( for example Vue component for datatables.net )

I would suggest directly shipping SFC to npm and let userland plugin to compile it.

• requires to add "type": "module" in package.json

• Component must be defined separate exports field in package.json ( separate from other compiled files, if component use hook or composable )

---

Compiled component.vue

vue 2.6 vite-plugin-vue2:

vue 2.7 @vitejs/plugin-vue2 :

vue 3 @vitejs/plugin-vue:

[sadeghbarati]

Use unbuild for shipping the component directly

unbuild is good with .ts defineComponent and composable, at this time it's not compatible with .vue files

unjs/unbuild#80

[Hisioni]

have u find the way use monorepo to adapt to use vue-demi for SFC?
i try to this but when i use vite-plugin-dts generate d.ts there still have many compatibility issues.

[sadeghbarati]

have u find the way use monorepo to adapt to use vue-demi for SFC? i try to this but when i use vite-plugin-dts generate d.ts there still have many compatibility issues.

Hi,

Unfortunately no, I end up using defineComponent(.ts) way instead of SFC(.vue) files

---

for monorepo answer can be yes, but it questions the duty of vue-demi

- packages/
  -- vue3
  -- vue2

[Hisioni]

have u find the way use monorepo to adapt to use vue-demi for SFC? i try to this but when i use vite-plugin-dts generate d.ts there still have many compatibility issues.

Hi,

Unfortunately no, I end up using defineComponent(.ts) way instead of SFC(.vue) files

for monorepo answer can be yes, but it questions the duty of vue-demi

- packages/
  -- vue3
  -- vue2

Yeah, still I am same problem with the questioner, use TS render way it's hard to my team, we perfer to SFC more, then will use antfu says that publish components, use different project v2, v2.7, v3 to build it, use git branch to manage it.

[sadeghbarati]

this issue also related to this pull-request

#154

[sadeghbarati]

@Hisioni can you share your vue-demi repo? If it possible

[Hisioni]

@Hisioni can you share your vue-demi repo? If it possible

Of course, in this repository, still have question, i don't know how to config to generate d.ts on every vue version

[sadeghbarati]

have u find the way use monorepo to adapt to use vue-demi for SFC? i try to this but when i use vite-plugin-dts generate d.ts there still have many compatibility issues.

@Hisioni I have same issue too, I thought generating types only required once with Vue3 as main version in package.json

the error I got when installing vue-demi lib on vue2.7 project I think it was editor problem
Generic type 'DefineComponent' requires between 0 and 11 type arguments.

However, autocomplete props on component only pops up on Vue3 (using Volar)

Found an example for handling type definitions separately 😨 also installed this package on Vue2 app autocomplete props are not showing only showed up on Vue3
https://github.com/alibaba/formily/tree/formily_next/packages/vue

an example that autocompletes props are showing up ctrl + space on Vue2.6
https://github.com/DanSnow/vue-recaptcha

---

https://discord.com/channels/793943652350427136/1052340776186695751