Vue 3 Component Creator

Vue 3 Component Creator

Create Vue 3 SFC components following these conventions:

Structure

Every component must use <script setup> syntax with Composition API (no Options API, no TypeScript).

<ComponentName>.vue
├── <script setup>  — imports, props, emits, reactive state, methods
├── <template>      — HTML template
└── <style>         — (optional) scoped styles

Rules

Props and Emits

• Use defineProps() with object syntax for type declarations and defaults
• Use defineEmits() with array of event names: defineEmits(['add', 'delete'])
• Always provide default values for optional props
• Name emits as verbs: @add, @toggle, @delete, @update

Reactive State

• Use ref() for primitive values and single objects
• Use computed() for derived state
• Use watch() with { deep: true } when watching objects/arrays
• Never use reactive() — prefer ref() for consistency

Styling Conventions

• Layout & spacing: Use Tailwind CSS utility classes (flex, gap-4, mb-6, rounded-xl, etc.)
• Colors & shadows: Use CSS custom properties via inline style bindings, NOT Tailwind color classes
  • style="color: var(--text)" — text color
  • style="background: var(--surface)" — background
  • style="border-color: var(--border)" — borders
  • style="box-shadow: var(--shadow-md)" — shadows
• This separation enables theme switching without Tailwind rebuilds

Component Communication

• Parent → Child: props
• Child → Parent: emits (never use provide/inject for simple parent-child)
• Cross-component: composables (shared state via ref())

Expose

• Use defineExpose() only when parent needs imperative access (e.g., focus())
• Keep exposed surface minimal

Template Conventions

• Use v-for with :key always
• Use v-if / v-show appropriately (v-if for conditional rendering, v-show for frequent toggles)
• Destructure complex style bindings into computed or inline objects
• Prefer @click over v-on:click

Template

Generate a Vue 3 SFC component following this pattern:

<!--
  ComponentName.vue — One-line description
  Features: list key features
-->
<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  items: { type: Array, default: () => [] },
  active: { type: Boolean, default: false },
})

const emit = defineEmits(['select', 'delete'])

const localState = ref('')

const derivedValue = computed(() =>
  props.items.filter(item => item.active)
)

const handleAction = () => {
  emit('select', localState.value)
}
</script>

<template>
  <div class="flex flex-col gap-3"
       style="background: var(--surface); color: var(--text);">
    <div v-for="item in derivedValue" :key="item.id"
         class="px-4 py-2 rounded-lg transition-all duration-200"
         style="border: 1px solid var(--border);"
         @click="handleAction">
      {{ item.name }}
    </div>
  </div>
</template>