Vue 2 template support

[Shinigami92]

I want to use vue-tsc with currently a Vue 2 project due to I'm stuck on Vuetify

But sadly I get errors like <template v-for> key should be placed on the <template> tag. vue(32)

https://v3.vuejs.org/guide/migration/key-attribute.html#overview

This is correct for Vue 3, but not for Vue 2. Is it possible somehow to use a --vue=2 mode to prevent/suppress such errors?

De we need to report that to Volar instead of vue-tsc?

[Shinigami92]

Surprisingly I found a workaround 👀

I added following to my shims-vue.d.ts

declare module '@vue/runtime-dom' {
  type ReservedProps = {
    key?: string | number | symbol;
  };
}

---

Volar shows the error anyways

But that's okay, at least I can successfully build the project 🙂

[johnsoncodehk]

Thanks for the suggestion. But vue-tsc only report the TS problems, template problems report by vue compiler (vue-cli / vite) not by vue-tsc, so you can just ignore it.

Vue 2 template check may be supported by Plugin API.

[Shinigami92]

@johnsoncodehk I have now also some parts like this:

Is there an option to just say e.g. //- @ts-expect-error? Or just to disable ts-type for only template for now?

[johnsoncodehk]

You can use @ts-ignore in expression like this:

v-if="
  // @ts-ignore
  synonym.entity
"

And the problem is if you use v-if and v-for on single node, in vue 3 it's if > for, in vue 2 it's for > if.

You can define v-if on a single template node on vue 2 project to avoid this problem.

v-chip(v-for="synonym in item.synonyms", ...)
  template(v-if="synonym.entity")
    - ...

Note: vetur's eslint also report that don't use v-if and v-for on single node.

[Shinigami92]

I know the breaking change. But using v-chip(v-for) > template(v-if) was not an option here, due to I don't want empty chips rendered.
I needed a function to pre-filter the array/object.

[johnsoncodehk]

Is this better for you?

template(v-for="synonym in item.synonyms")
  v-chip(v-if="synonym.entity", ...)
    - ...

[Shinigami92]

Sadly not, cause this would just move the error to the :key

template(v-for="synonym in item.synonyms")
  v-chip(v-if="synonym.entity", :key="synonym.id" ...)
                                ~~~~~~~~~~~~~~~~~ <template v-for> key should be placed on the <template> tag. vue(32)
    - ...

Letting me asked again to tell the compiler somehow to just ignore it, cause I know I'm using Vue 2 😅
And moving the :key up to template would result in rendering issues / runtime warnings in the browser console

[johnsoncodehk]

A good news is Vue 3.1 template compiler is available to Vue 2!

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

[johnsoncodehk]

Please track vuejs/language-tools#346

[Shinigami92]

Now that we have compat mode 2, could we add the symbol typedef automatically?

Currently I'm applying this patch via patch-package to suppress build errors.

diff --git a/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts b/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts
index f183ace..2d3b617 100644
--- a/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts
+++ b/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts
@@ -1398,7 +1398,8 @@ type EventHandlers<E> = {
 import * as RuntimeCore from '@vue/runtime-core'
 
 type ReservedProps = {
-  key?: string | number
+  // https://github.com/johnsoncodehk/vue-tsc/issues/35#issue-901304468
+  key?: string | number | symbol
   ref?:
     | string
     | RuntimeCore.Ref

[johnsoncodehk]

It seem 3.2.0-beta.8 already fixed it.

vuejs/core#4242