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

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:

CAlert not recognized as the component it is

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?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source