Subscribe on changes!

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

avatar
Oct 20th 2021

Version

3.2.20

Reproduction link

github.com

Steps to reproduce

git clone https://github.com/axelthat2/bug
git checkout vue-global-component-ts
yarn

What is expected?

I expect the props type inference for Component1 component.

What is actually happening?

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? I don't see the guide anywhere in docs.

avatar
Oct 20th 2021

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

BTW this is solved with volar (https://github.com/johnsoncodehk/volar)