How to add type support for global components in Vue 3?

user_9764412 0
Viewed 2587

So I have Component1,

<!-- Component1 -->
<script lang="ts" setup>
defineProps<{ msg: string }>()
</script>

<template>
  <p>{{ msg }}</p>
</template>

Then I register it globally,

// main.ts
import { createApp } from "vue"
import App from "./App.vue"
import Component1 from "./Component1.vue"

const app = createApp(App)
app.component("Component1", Component1)
app.mount("#app")

Afterwards I use it as,

<script setup lang="ts"></script>

<template>
  <Component1 />
</template>

However I don't get type inference for props for Component1. So how do I add typescript support for this global component?

vuejs3 vue.js typescript
2 Answers

The vue package exports a GlobalComponents interface that can be augmented with your global component's definition. For example, you could add the module augmentation in src/global-components.d.ts, as seen in the Volar docs:

// src/global-components.d.ts
import Component1 from '@/components/Component1.vue'

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

enter image description here

user_62771510

I found @tony19's answer nearly correct — Volar recognized the component, but didn't provide proper type hinting. Instead found I needed to extend @vue/runtime-core

// src/global-components.d.ts
import Component1 from '@/components/Component1.vue'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    Component1: typeof Component1,
  }
}
user_12674090
Related