Vue Component (Composition API)

Vue.js component skeletons in 2026

Vue.js is a progressive JavaScript framework created in 2014 by Evan You, an ex-Googler from the Angular team who wanted "the parts of Angular I liked, without the weight". Today Vue powers GitLab, Nintendo's storefront, Louis Vuitton and Alibaba. Components are the unit of composition — each .vue file is a Single File Component (SFC) bundling three blocks: <template> (HTML-ish markup with directives), <script setup> (reactive state and logic) and <style scoped> (CSS isolated to this component).

This generator scaffolds the boilerplate so you never have to retype defineProps, defineEmits, the scoped style block and a starter template. Type the component name in PascalCase, copy the output, drop it into src/components/YourName.vue and start filling in the body — saving thirty seconds per file adds up across a real codebase.

Vue 2 vs Vue 3: which one to scaffold for

Vue 2 (Options API only) reached end-of-life in December 2023; the last 2.7 release backported some Composition-API helpers but no further security patches are issued. Vue 3 (released 2020) ships both Options API and Composition API, has much better TypeScript inference, a rewritten reactivity system based on Proxy, fragments (multiple roots) and Teleport. Every new project in 2026 should target Vue 3 — unless you're maintaining a legacy app where the cost of migration outweighs the EOL risk.

Composition API and <script setup>

The Composition API exposes reactivity as functions: ref() for primitives, reactive() for objects, computed() for derived values, watch() and watchEffect() for side effects, plus lifecycle hooks like onMounted(), onUnmounted() and dependency injection via provide()/inject(). The <script setup> sugar makes the entire block the component body — top-level bindings are auto-exposed to the template and refs auto-unwrap, so you write {{ count }} instead of {{ count.value }}.

Built-in directives cheatsheet

• v-if / v-else-if / v-else — conditional rendering (removes from DOM).
• v-show — toggles display:none; keep in DOM.
• v-for="item in list" :key="item.id" — list rendering; :key is mandatory.
• :attr (v-bind) and @event (v-on) — bindings and listeners.
• v-model — two-way binding; supports v-model:propName on custom components.
• v-slot, v-html (beware XSS), v-text, v-pre, v-once, v-memo.

Props, emits and slots

Props are declared with defineProps<{ name: string; age?: number }>() (TypeScript) or defineProps({ name: { type: String, required: true } }). Emits are declared with const emit = defineEmits(['update:modelValue']) and fired via emit('update:modelValue', val). Slots come in three flavours: default <slot/>, named <slot name="header"/> and scoped <slot :data="row"/> consumed by the parent with v-slot="{ data }".

Vue ecosystem essentials

• Pinia — official state management, replaces Vuex; based on the Composition API, fully typed.
• vue-router v4 — file-based or programmatic routing; lazy-loaded chunks per route.
• Nuxt 3 — full-stack meta-framework for SSR, SSG, ISR and edge rendering.
• VueUse — 200+ utility composables (useLocalStorage, useFetch, useDark, ...).
• Vitest + Vue Test Utils — fast unit tests with Vite under the hood.
• VeeValidate / FormKit — form validation and rendering.

FAQ

Is Vue 2 still safe to use in production? It still runs, but it received its final patch in late 2023. New CVEs in Vue 2 won't be fixed by the core team. If you can't migrate, the HeroDevs Vue 2 NES commercial LTS exists.

Should I pick Options API or <script setup>? For new components, prefer <script setup> — less boilerplate, better TS inference, easier logic extraction into composables. Options API still works in Vue 3 and remains a fine choice for teams coming from Vue 2 who want gradual migration.

Vue vs React vs Svelte — which is better? All three are excellent. Vue is more opinionated (SFC, built-in reactivity, official router and store), React is more flexible but heavier on boilerplate, Svelte compiles away the runtime entirely. Choice usually comes down to team familiarity and hiring market.

How do I add TypeScript? Rename the file to keep .vue but write <script setup lang="ts">. The create-vue scaffold already configures vue-tsc for type checking and Volar in the editor.