So I'm working on a brand new project with Vue 3 and Volar as the extension in VSCode. And I'm using a component library, CoreUI. So in my main.ts I now have this code.

import { createApp } from 'vue'
import App from './App.vue'
import CoreuiVue from '@coreui/vue'

const app = createApp(App);
app.use(CoreuiVue);

Which now means that in any other SFC I can just use any CoreUI component, like for example <CAlert color="primary">A simple alert!</CAlert>, without needing to import it.

And it compiles just fine. During compiling I get no complaints from TypeScript or ESLint about not having properly imported a component. So it seems like those tools are aware that these components are now globally available.

However, Volar is not and depicts that CAlert like this:

In other words, it doesn't recognize CAlert and can't give me any intellisense on it, like what it's properties and property-types are.

How can I make Volar understand that all CoreUI's components are just globally available?

CodePudding user response：

Global components should be declared in src/components.d.ts:

import { CAlert } from '@coreui/vue'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    CAlert: typeof CAlert
  }
}

Unfortunately, every used component from CoreUI must be explicitly declared (there's currently no way to declare all components from Core UI in one line for type augmentation).

Also, you'll need to restart Volar's Vue language server from the