Auto imported components are highlighted in red instead of green.

[StefanGhiban]

Hi! I have disabled vetur to not have any conflicts with volar and the green highlighting on the auto imported components is gone. The code keeps working correctly, but the auto imported components appear in red. I am using the unplugin-vue-components from @antfu in a vite setup. If I activate vetur back, the highlighting becomes green again, but I do not want to keep it active in order to avoid conflicts.

[xiaoxiangmoe]

Can you provide me a minimal reproduction?

[StefanGhiban]

@xiaoxiangmoe

1. I created a component in the components folder.
2. I have added the component to the App.vue root page of the app.
3. Due to having auto importing components plugin for vite, I do not have to explicitly import the component in order to work.
4. The component shows up in the browser and everything works fine, except the component in the template is highlighted in red. When I write the component, volar gives me the option to import that component. The component stays red unles I explicitly import that component in a page with: import Component from './components/Component'

[ivanRemotely]

Hey there! I'm getting the same issue. I'm using latest Vite/Vue/Typescript, and importing components using the following code:

const componentsPlugin: Plugin = {
  install: (app) => {
    const components = import.meta.globEager('./*.vue');

    for (const key in components) {
      const component = components[key].default
      app.component(component.name, component);
    }
  },
};

[johnsoncodehk]

See https://github.com/antfu/unplugin-vue-components#typescript

Duplicate of #522

[StefanGhiban]

@johnsoncodehk The solution from issue #522 doesnt work for me. "editor.semanticHighlighting.enabled": true doesn't change aything for me. Also, the typescript section of the unplugin vue components doesnt apply to me because I am not using typescript.

[chrislee973]

@StefanGhiban Try setting your config to generate the d.ts file: https://github.com/antfu/unplugin-vue-components#typescript. Even though you're using js you need to do this step.

[ga676005]

This doesn't work for me tsconfig.json

{
  "include": [
    "./components.d.ts"
  ],
}