Vue Component Generator

`<script setup>` is the recommended way to write Vue 3 components. It's syntactic sugar over the Composition API that removes boilerplate: no `export default`, no explicit `setup()` function, and all top-level declarations are automatically exposed to the template. Variables defined with `ref()` or `reactive()` are directly usable in templates. It pairs perfectly with TypeScript using `defineProps<Props>()` and `defineEmits<Emits>()`.

Use `defineProps<Props>()` with a TypeScript interface. For default values, wrap with `withDefaults()`: `const props = withDefaults(defineProps<{ title: string; count?: number }>(), { count: 0 })`. The `Props` interface is type-checked at compile time by the Vue compiler. Avoid mixing runtime props declaration (`defineProps({ title: String })`) with the type-based approach in the same component.

`ref()` wraps a value in a reactive container — access it via `.value` in script, but the template auto-unwraps it. Use `ref` for primitives (strings, numbers, booleans) and for reactive object references you might reassign. `reactive()` makes an entire object deeply reactive — no `.value` needed. Drawback: you can't destructure a reactive() object without losing reactivity (use `toRefs()` to fix this). Stick with `ref` for most cases.

`watch(source, callback)` runs only when the specific source changes, giving you both old and new values. It's lazy by default (doesn't run on mount). `watchEffect(callback)` tracks all reactive dependencies accessed inside it and runs immediately — similar to Svelte's $effect. Use `watch` when you need old values or want precise control over what triggers the watcher. Use `watchEffect` for effects that should run once immediately and re-run when any dependency changes.

A composable is a function that uses the Composition API to encapsulate and reuse stateful logic. Name it with a `use` prefix (e.g., `useCounter`, `useFetch`). Return reactive state and methods as a plain object. Composables are called at the top level of `<script setup>` (not inside conditions or loops) so Vue can properly track their lifecycle. Libraries like VueUse provide hundreds of production-ready composables.

provide/inject is Vue's dependency injection — the ancestor-to-descendant alternative to prop drilling. A parent calls `provide('key', value)` to make a value available to all descendants. A descendant calls `const val = inject('key')` to receive it. For type safety, use InjectionKey: `const countKey: InjectionKey<Ref<number>> = Symbol('count')`. inject() accepts a default value as the second argument.