vetur | Vue tooling for VS Code

My VSCode (Vetur) is displaying this warning, however the imported component is being used in the template.

Warning in import :

Component used :

Another issue is that the summaries are appearing in duplicate, as well as the CSS color thumbnails. I have already uninstalled some extensions and reviewed the settings but I couldn't find the option that causes this.

Color duplicate :

Migrating VueJS project from JavaScript + Options API to TypeScript + Composition API, I have gradually found equivalents of most of the stuff. One thing that I'm struggling with is the v-model feature. I found a good article on implementing it using Composition API, where author creates a composable function that can be reused in components that want to implement v-model. I'm trying to now write an equivalent function using TypeScript.

Here is the original JS code:

I have a fresh project which I created using the vue command line tool. vue create . But when I type npm serve, the component import is highlighted as red. This is a fresh creation of the project, I haven't changed anything.

Cannot find module '@/components/HelloWorld.vue' or its corresponding type declarations.Vetur(2307).

With the following code, Vetur inferenced x,y to have type number | undefined.

The undefined cause tons of warning on further usage of x,y .

How can I remove the undefined from the type inference?

While working with multiple Vue JS projects (Vue 2 & Vue 3), it is recommended to use a different extensions based on the version your using.
Vue 2 = Vetur
Vue 3 = Volar

Is there a way to auto-enable/disable these extensions from either settings.json or vscode itself?

maybe something like:

Trying to get Vue/TypeScript/ESLint/Prettier/Vetur formatting in VS Code is a nightmare. There are many many GitHub issues and StackOverflow posts on this but I assure you this is not a duplicate. I have followed every tutorial and none of them work. Some of them fix one problem but introduce another. Some of them don't fix any problems. Some of them crash VS Code. Most conflict with each other in the advice they prescribe, including multiple official sources. Many are outdated, referencing obsolete config properties.

I want VS Code to lint and format my .vue and .ts files when I save.

I have spent hours and tried many, many configurations from different posts and tutorials, but this is the closest I have gotten to something that works. With the below configuration, however, whenever saving a .vue file, elements in the .vue files get momentarily wrapped onto a new line, and then immediately reverted back to a single line element:

then then

Below are my current configuration files:

.eslintrc.js

I'm having this weird error with Vetur in a typescript nuxt.js application. It shows this error message on the first line of all the components whether it's an empty line or has the tag.

I'm not sure when this error started to appear or what does it even mean?

Any help will be appreciated, thanks a lot!

I've been battling this issue for a while now. Does anyone know how to prevent intellisense (in VSCode) from adding column on autocomplete?

I have my custom component and this is how my intellisense autocompletes my component's props.

• The extension is Vetur v0.34.1 (https://marketplace.visualstudio.com/items?itemName=octref.vetur).
• I do not have a config for vetur setup.