Vue 2 support ?

[IndexXuan]

Great Works.
It seems use vue-tsc or tsc, does these work for vite + vue2 ?

[fi3ework]

@IndexXuan Not so familiar with Vue, could you tell me is there any vue-tsc liked library for vue2?

[IndexXuan]

maybe fork-ts-checker-webpack plugin
vti

[fi3ework]

Thanks for the pointing out. I'll take a look.

[fi3ework]

I'm trying to implement this based on Vetur language server.

[IndexXuan]

thanks a lot.

[IndexXuan]

It seems that vetur's vti not support vue slot type check and will be deprecated and replaced by volar(vue-tsc), maybe fork-ts-type-checker is better for Vue2.x ?
https://github.com/TypeStrong/fork-ts-checker-webpack-plugin

[fi3ework]

Thanks @IndexXuan. I'm not going to implement the type checking like fork-ts-typecheck by myself (for now), because:

1. Vetur / Volar has done great battle-tested work for type checking. I can assume developers will use Vetur or Volar when they write code. So I think it's better to build the library upon Vetur and Volar's opened language server to make it easier to be used.
2. fork-ts-checker-webpack-plugin also have some scenes that can't cover, but Vetur can. Add TS check in Vue template TypeStrong/fork-ts-checker-webpack-plugin#587.
3. It's mentioned on Volar's documentaion that Vue2 is also supported

This tool required Vue 3 types from the @vue/runtime-dom module.

Vue 3 in itself includes the package @vue/runtime-dom. For Vue 2 you will have to install this package yourself:

So I think Vue2 is supported so far. All we need is waiting for the watch mode of vue-tsc releases.

4. I'll still try to support Vetur to check Vue2 to keep the developer habit and Volar is still in early stage.

What do you think. 😀

[IndexXuan]

I think you are right. and volar for Vue2.x I have a try, not very well(great for Vue3.x).
I think 2.x will exist long term, this feature will be very useful.

[Djaler]

Hello. vue-tsc works good for Vue 2

[IndexXuan]

@Djaler I dont think so. at least my Vue2.6 + composition-api project not good. do you have demo Vue2.x project so I can test and try. bro.

[Djaler]

I have no demo, but I use vue 2.6 with composition api on my work project and vue-tsc typechecking works for me. What doesn't work for you?

[IndexXuan]

I will check it later. I now use vetur in IDE and vti in CI. vue-tsc give some strange errors before. thanks for you reminder.

[fi3ework]

Vetur / VLS have been supported. Check the new README and have a try (renamed the package 😅).

[IndexXuan]

you are my hero. will try it.

[IndexXuan]

Back from vacation. will test it NOW and give feedback ASAP.

[IndexXuan]

It's perfect. Thank you very much.
I was warried about v-slot="{ props }" type check, it is(typed slot) not supported in Vue 2, this plugin ignore it too, and catch up all supported feature with Vue2 + vetur. Thanks a lot.

[IndexXuan]

errors overlay only show once, is it by design ? while the error message show up in browser Console every time.
I can accept it and you can track it if necessary.

[fi3ework]

@IndexXuan What does

errors overlay only show once

mean, the overlay should try to show up if there's an error after watched file changed 🤔

[IndexXuan]

HelloWorld.vue with props msg which type is string | undefined and src/views/home.vue import HelloWorld component and give :msg="1" which is number. the errors show cannot assign number to string | undefined only show once and after browser refresh, it is disappear and never showup.

It is because I didn't modify this file again, the watcher not fire. that is OK.

[IndexXuan]

我个人还好，据同事们体验，点击遮罩外侧或者刷新，错误就没了，还是有点突然或者会忘记处理，能 cache 住么 ...

[fi3ework]

@IndexXuan I also encountered this scenario while developing this plugin. 😅 I guess this might be a Vite related problem, the HMR sever (plugin checker server) didn't resend the error after refresh. I'm not sure whether we can detect a browser refresh action by Vite plugin system. I'll check it later.

[IndexXuan]

I am wrong, too much v-slot types error in real-world project. I raise issue on vetur.

[IndexXuan]

https://github.com/IndexXuan/vue-cli-plugin-vite/releases/tag/v1.2.2

[IndexXuan]

@Djaler How can you use vue-tsc/volar with Vue 2. for me, there are too much errors.
for example, v-model in Vue 2 means props.value + emit input and in Vue 3 means modelValue + update:modelValue, how volar handle this ?

just the repro demo here. if you have v-model and props: { value: {type: String, required: true } }, you will got error when you use.

Also, vue-tsc not support watch mode right now, use vite-plugin-checker vue-tsc is the same as vue-tsc --noEmit && vite build am i wrong ?

[IndexXuan]

ref: vuejs/language-tools#273

[Djaler]

I checked your example. Looks like volar have problems with required: true for value prop. I just have defaults in all such cases (for v-model). I think you should create an issue to Volar.

For the second question: yeah, by now vite-plugin-checker will not work with vue-tsc in dev mode

[IndexXuan]

@Djaler thanks a lot. I created issue to valor, the author said I should use vetur/vls/vti.

So I think until now, Vue 2 project should use vetur and push vetur support slots and global component like valor, and finally migrate to Vue 3.

[Djaler]

I tried to use vti in my project and have a bunch of strange errors. Maybe I need to try again

[IndexXuan]

@Djaler me too. I am even wrap VTI and ignore some strange errors.(sth like interface name not found?)