Vue 2 support ?

[IndexXuan]

Thanks for this great plugin/lsp.
the document said when you install @vue/runtime-dom, volar/vue-tsc support Vue 2, is it really that smooth ?

I create a Vue 2 app with @vue/composition-api by vue-cli, and the first step is v-model handler.
Vue 2 v-model means props.value + emit input & Vue 3 is modelValue + emit onUpdate:modelValue, how volar handle this different ?

repro link: https://github.com/IndexXuan/vue2-volar-test-app/blob/master/src/views/Home.vue#L9
when I have a v-input component

  props: {
    value: {
      type:  String,
      required: true,
    }
  }

when I use this v-input on parent component

<v-input v-model="xxx" />

It will ends up with error.

Also there are some template key warning(Vue 2 should place key at child), not big problem.

Thanks for you help.

[IndexXuan]

https://github.com/johnsoncodehk/volar/blob/263dd59fb71d54dc69c50ff8846350b6752648e7/packages/vscode-vue-languageservice/src/generators/template.ts#L498

[johnsoncodehk]

the document said when you install @vue/runtime-dom, volar/vue-tsc support Vue 2, is it really that smooth ?

No it's not, @vue/runtime-dom only make Vue 3 type-checking working in Vue 2 project, full backward compatibility to Vue 2 is not the purpose, Vetur already do it.

On the other hand, you can use Vue 3 template compiler in Vue 2.

https://blog.ninja-squad.com/2021/06/07/what-is-new-vue-3.1/

[IndexXuan]

@johnsoncodehk I know Vue 3.1 compat build, but how ?
There are some scale-project which I cannot migrate to Vue 3.

Should I use vetur instead of volar ? But vetur not support slot type-checker. so sad.

[johnsoncodehk]

Should I use vetur instead of volar?

You need to choose. If you need type support based entirely on Vue 2, please use Vetur.

[IndexXuan]

I think push vetur support slot type-checker and official globalComponent typings is better.

Thanks.

[Djaler]

On the other hand, you can use Vue 3 template compiler in Vue 2.

It cannot be used in many apps, because Dependencies that rely on Vue 2 internal APIs or undocumented behavior. The most common case is usage of private properties on VNodes. If your project relies on component libraries like Vuetify, Quasar or ElementUI, it is best to wait for their Vue 3 compatible versions. https://github.com/vuejs/vue-next/tree/master/packages/vue-compat#known-limitations

Maybe you can add some workaround for this case with v-model for Vue 2?

[johnsoncodehk]

@Djaler Sorry, due to maintenance costs, it will not be supported now. But technically Vue 2 template compiler can be support by Plugin API.

#185

[victorgarciaesgi]

I can confirm that Volar works on a Vue 2 project with @vue/composition-api, but it is way slower than Vetur.
It's a gain & cost between great type safety and speed

[johnsoncodehk]

but it is way slower than Vetur

@victorgarciaesgi Have you enabled vetur.experimental.templateInterpolationService for Vetur?

[victorgarciaesgi]

@johnsoncodehk No Vetur is disabled in the workspace, the settings should no apply I think?

[johnsoncodehk]

@victorgarciaesgi If you want TS support in <script> and <template> with Vetur, you need to enabled vetur.experimental.templateInterpolationService.

Compared to Vetur + vetur.experimental.templateInterpolationService, Volar should be much faster.

Otherwise, Volar may have performance problems on your machine, and I need profile record for further inspection.