Use of VSCode Volar extension for a Vue 2 / Nuxt / Typescript / @nuxtjs-composition-api project

Issue

I'm trying to setup the Volar VSCode extension to work with a NuxtJS / Typescript project. I currently face these two problems in my .vue file templates. I followed the installation recommendations for Vue 2 and Typescript as well as enabling Take Over mode.

I've managed to fix some issues that happened in my codebase with the extension but these two remain.

Vue 3 deprecation warnings

(deprecation COMPILER_V_ON_NATIVE) .native modifier for v-on has been removed as is no longer necessary.
  Details: https://v3.vuejs.org/guide/migration/v-on-native-modifier-removed.htmlvue(COMPILER_V_ON_NATIVE)

I would like to find a way to silence these warnings since I'm still using Vue 2 (NuxtJS is not yet compatible with Vue 3).

Custom event handlers, for example I have this event handler on a custom <Modal> component.

@modal-confirmation="onModalConfirmed"

const onModalConfirmed = (modalConfirmation: ModalConfirmation) => {};

Type '(modalConfirmation: ModalConfirmation) => void' is not assignable to type '(...payload: unknown[]) => unknown'.
  Types of parameters 'modalConfirmation' and 'payload' are incompatible.ts(2322)

Anyone went through this process before ?

Solution

According to @johnsoncodehk on Volar's GitHub:

I would like to find a way to silence these warnings since I'm still using Vue 2 (NuxtJS is not yet compatible with Vue 3).

We need to change experimentalCompatMode option for this, but this option design behavior is not finalize yet. So it will not change in a short time.

@vue/composition-api events type fixed in 953cb2d.

Answered By - Théo Lavaux