CODEWITHSUNDEEP
typescriptvue.jsvisual-studio-code
JsonKody
JsonKody

Reputation: 717

How to make VSCode recognize global component in Vue?

Hello, I have a project:

Vite -> Vue 3 -> Typescript (I use Volar for .vue sytax)

And I've made a global component Icon because it's used almost everywhere so i can just type it without importing the component. Problem is that VSCode think it's some mistake (without import).

The component works good. It's imported to vue app in main.ts like this:

// registration of global component <Icon />
import IconComponent from './components/ui/icon/IconComponent.vue'
app.component('Icon', IconComponent)

Any idea how could I tell VSCode "hey this is a global component, so don't mark it as mistake in other .vue files"? :)

Upvotes: 2

Views: 3600

Answers (1)

JsonKody
JsonKody

Reputation: 717

I think I've found the answer so I'll post it here.

On Volar github there is:

Define Global Components

"Local components, Built-in components, native HTML elements Type-Checking is available with no configuration. For Global components, you need to define GlobalComponents interface, for example:"

// components.d.ts

// declare module '@vue/runtime-core' works for vue 3
// declare module 'vue' works for vue2 + vue 3
declare module 'vue' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

export {}

Upvotes: 5

Related Questions