Not getting autocompletion for custom component props? I got you.

Consider we have a check button with some specific style that is shared across our app. And we have the following props.

<!-- GlobalCheckButton.vue -->

<script setup lang="ts">
type CheckButtonPropsType = {
    size: string | number,
    truColor?: string,
    falseColor?: string,
}

const props = withDefaults(defineProps<CheckButtonPropsType>(), {
    trueColor: 'green',
    falseColor: 'red',
})
</script>

This is the end result we need,

Steps to achieve that,

1. Register components globally
2. Enable autocompletion for component props

# Register Global Components

If you are familiar with Vue and know how to register a global component, this section can be skipped.

1. Create a component inside the components folder (/src/components/) with any name, let's say GlobalCheckButton.
2. Import the component into main.ts or main.js file

// main.ts or main.js

import { createApp } from 'vue'
import App from './App.vue'

// @ refers to the "src/" folder
import GlobalCheckButton from '@/components/GlobalCheckButton.vue'
// or
import GlobalCheckButton from './components/GlobalCheckButton.vue'


const app = createApp(App)

app.component('GlobalCheckButton', GlobalCheckButton)
...

Please visit this link to understand how to automatically register global components.

# Enable autocompletion for component props

Once the component is registered, we can directly use the registerd component without importing in any Vue file. But when we hover the component, this is what we get.

Wait, What? We registered the component globally right? Then why is that showing unkown? What does that even mean? Also, when we try to type any of our component props, we see there is no autocompletion.

This is because typescript doesn't understand what we are trying to do here.

So, let's make TS know the type of our component.

Create a env.d.ts file at projects root. If the file already exists, add the following content to it,

// env.d.ts

import type GlobalCheckButton from '@/components/GlobalCheckButton.vue'

declare module 'vue' {
    export interface GlobalComponents {
        GlobalCheckButton: typeof GlobalCheckButton
    }
}

Now, when we hover our component, we get this,

We would also get our component props autocompletion.

The red squiggly line indicates that particular prop is a required one.

And that's a wrap.