Props, emits, slots, and template bindings

Declare a small API#

In ReviewButton.vue:

<script setup lang="ts">
defineProps<{ title: string; disabled?: boolean }>()
const emit = defineEmits<{ confirm: [id: number] }>()
</script>

<template>
  <button :disabled="disabled" @click="emit('confirm', 42)">
    {{ title }}
  </button>
</template>

Invoke completion in the template and navigate title to its props declaration. Rename that binding through the IDE and review supported cross-block uses instead of replacing every word title in the project.

Inspect a caller#

Import the component in a parent and complete its props and emitted events. Review required props, directive modifiers, component tags, and slots in context. Macros such as defineProps, defineEmits, defineSlots, and defineModel contribute different API information.

For Options API components, the plugin extracts the corresponding component model rather than requiring every file to use <script setup>.

Binding scope matters#

Variables introduced by v-for, slot bindings, or nested template blocks have a local scope. An unknown-template-variable warning should be checked against that scope and the script’s declarations. Intentionally type an undefined name in a scratch copy to inspect the message, then undo.

Inspect injected languages#

lang="ts", SCSS/Less, Pug, and other supported block languages use host-IDE language support. Source highlighting does not install a transpiler or make the runtime build accept an unconfigured language. Run the project’s type-check/build after an API change.