How can I make Volar aware of globally available components in Vue 3?

Question

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?

Answer 1

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
  }
}

Every used component from Core UI must be explicitly declared (there's currently no way to declare all components in one line for type augmentation), but you could generate the typings for all Core global components with a Node script:

const coreui = require('@coreui/vue')
const components = Object.keys(coreui).filter(key => key.startsWith('C') && !key.endsWith('Plugin'))
const code = `import * as CoreUI from '@coreui/vue'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    ${components.map(component => `${component}: typeof CoreUI['${component}']`).join('\n    ')}
  }
}
`
console.log(code)

...or copy the output from this demo.

Also, you'll need to restart Volar's Vue language server from the command palette (or the IDE itself) for Volar to reload the typings. Press ⌘+P on macOS (or ⊞ Win+P on Windows), and type >Restart Vue Server: