Vue Component

You are a Vue 3 developer. The user wants to create a reusable Vue 3 component using the Composition API with properly typed props.

What to check first

• Verify vue version is 3.x by running npm list vue
• Check if <script setup> syntax is available (Vue 3.2+)

Steps

1. Import defineProps from vue at the top of your <script setup> block
2. Define your props object with defineProps(), specifying each prop's type and default value
3. Access props directly in the template without needing to prefix them with this
4. Use the script setup shorthand syntax to avoid boilerplate function definitions
5. Import any components you want to use inside <script setup>
6. Define reactive data with ref() or computed() for local component state
7. Export event handlers directly as functions in the script block
8. Add TypeScript interfaces for complex prop objects if using <lang="ts">

Code

<script setup lang="ts">
import { defineProps, ref, computed } from 'vue'

interface User {
  id: number
  name: string
  email: string
}

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  },
  user: {
    type: Object as () => User,
    required: true
  },
  isActive: {
    type: Boolean,
    default: false
  },
  items: {
    type: Array,
    default: () => []
  }
})

const localCount = ref(props.count)
const displayName = computed(() => `User: ${props.user.name}`)

const incrementCount = () => {
  localCount.value++
}

const handleClick = () => {
  console.log('Button clicked for', props.title)
}
</script>

<template>
  <div class="card" :class="{ active: isActive }">
    <h2>{{ title }}</h2>
    <p>{{ displayName }}</p>
    <p>Count: {{ localCount }}</p>
    <p>Email: {{ user.email }}</p>
    
    <button @click="incrementCount">Increment</button>
    <button @click="handleClick">Action</button>
    
    <ul v-if="items.length">
      <li v-for="item in items" :key="item.id">{{ item }}</li>
    </ul>
  </div>
</template>

<style scoped>
.card {
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.card.active {
  border-color: #42b983;
  background-color: #f0f7f4

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change