Single File Components

Open an SFC#

Open a .vue file in an installed Vue project. A small component can start with:

<script setup lang="ts">
defineProps<{ title: string }>()
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Use Go to Declaration on title in the template. The plugin should connect it to the props declaration. Completion also includes directives, modifiers, component tags, emits, and slots.

Work across blocks#

Script and style blocks use language injection for the block’s language. CSS modules and CSS v-bind() participate in completion and navigation where the project model can resolve them. Unknown template bindings receive inspections, including expressions inside bound attributes.

Refactor safely#

Invoke Rename on a prop or setup binding and review uses in both script and template. Use Find Usages before removing a binding. Extract Component and Extract Composable validate target files and dependencies; existing files are not overwritten.

After extraction, inspect imports and the generated component API, then run the project’s type-check and tests. Macros, generated code, and dynamic expressions may need review beyond what static analysis can infer.

Create a project#

Choose the Vue entry in File → New → Project, review the official create-vue choices and destination, and generate the app. The IDE creates run configurations for scripts exposed by the generated package.json; use these to start the app and verify the starter before customization.