Vue Props Hover

Hover over any Vue 3 component to instantly see its props — types, defaults & required status.

Features

🔍 Component Hover — All Props at a Glance

Hover over any component tag (<MyComponent>) to see all its props in a compact list.

⚠️ Unknown Prop Warning

Hover over an attribute that doesn't exist as a prop — get a warning with suggestions and a list of available props.

✅ Single Prop Details

Hover over a known prop attribute to see if it's required or optional, plus its default value.

Supported Prop Styles

Works with all common Vue 3 patterns:

<!-- Type-based (Composition API) -->
<script setup lang="ts">
defineProps<{
  title: string
  count?: number
}>()
</script>

<!-- Vue 3.5+ Destructuring with Defaults -->
<script setup lang="ts">
const { title = 'Hello', count = 0 } = defineProps<{
  title?: string
  count?: number
}>()
</script>

<!-- withDefaults -->
<script setup lang="ts">
withDefaults(defineProps<{
  title?: string
}>(), {
  title: 'Hello'
})
</script>

<!-- Runtime Declaration -->
<script setup>
defineProps({
  title: { type: String, required: true, default: 'Hello' }
})
</script>

<!-- Options API -->
<script>
export default {
  props: {
    title: { type: String, required: true }
  }
}
</script>

How It Works

1. Hover over a component tag or its attributes in a .vue file
2. The extension finds the component file via its import statement
3. Props are parsed from the source and displayed in a tooltip
4. Results are cached for instant subsequent hovers

Import Resolution

• Relative imports (./components/MyComp.vue)
• Alias imports (@/components/MyComp.vue)
• Convention-based lookup (scans src/components/ etc.)
• Workspace-wide search as fallback

Requirements

• VS Code 1.85+
• Vue 3 project

Extension Settings

This extension has no configurable settings (yet).

Known Limitations

• Only works with project-local components (not library components from node_modules)
• Interface/type references in defineProps<MyType>() must be defined in the same <script> block
• Does not parse props from .ts/.js files (only .vue SFCs)

Release Notes

0.0.1

• Initial release
• Hover over component tags to see all props
• Hover over attributes for single prop details or unknown prop warnings
• Support for type-based, runtime, destructuring & Options API props
• Smart import resolution with alias support
• File-based caching with automatic invalidation

License

MIT