Design components with clear props and events contracts to ensure predictability and reusability. 2. Use default, named, and scoped slots to enable flexible content composition and adaptability across contexts. 3. Share logic via composables like useFormValidation instead of relying on inheritance for better decoupling and testability. 4. Keep styling flexible by using CSS variables, supporting class merging through $attrs, and allowing parent-defined classes, ensuring components can be easily customized and reused across projects.

Building reusable and composable Vue components isn’t just about writing clean code—it’s about designing components that are flexible, maintainable, and easy to reuse across projects. The key lies in thinking in terms of contracts (props, events, slots) rather than specific use cases. Here’s how to do it right.

1. Design Around Props and Events (The Component Contract)

Every component should have a clear, predictable interface. That means:

• Use props for input – anything that changes how the component behaves or looks should be a prop.
• Emit events for output – when the component needs to communicate something upward (like a button click or form change), use emit.

<!-- Reusable Button -->
<template>
  <button
    :class="`btn btn-${variant}`"
    @click="$emit('click')"
  >
    <slot />
  </button>
</template>

<script setup>
defineProps({
  variant: {
    type: String,
    default: 'primary',
    validator: (v) => ['primary', 'secondary', 'danger'].includes(v)
  }
})
defineEmits(['click'])
</script>

This button works anywhere—login form, modal footer, navbar—because it doesn’t assume context.

? Pro tip: Use defineProps and defineEmits with explicit validation. It makes your component self-documenting and prevents misuse.

2. Leverage Slots for Maximum Flexibility

Slots let you inject content into a component, making it truly composable.

Use:

• Default slots for primary content
• Named slots for structured layouts
• Scoped slots when parent needs access to child data

<!-- Reusable Modal -->
<template>
  <div class="modal">
    <header>
      <slot name="header">
        <h3>{{ title }}</h3>
      </slot>
    </header>

    <main>
      <slot />
    </main>

    <footer>
      <slot name="footer">
        <Button @click="$emit('close')">Close</Button>
      </slot>
    </footer>
  </div>
</template>

<script setup>
defineProps(['title'])
defineEmits(['close'])
</script>

Now you can customize the header or footer without forking the component.

? Real-world benefit: Design systems like Element Plus or PrimeVue use this pattern heavily. A single <Modal> can support forms, alerts, or wizards.

3. Favor Composition Over Inheritance

Vue doesn’t support component inheritance well. Instead, use composables (via useX functions) to share logic.

Example: form validation

// composables/useFormValidation.js
export function useFormValidation(initialValues, rules) {
  const values = ref({ ...initialValues })
  const errors = ref({})

  const validate = () => {
    let valid = true
    for (const [key, rule] of Object.entries(rules)) {
      if (rule.required && !values.value[key]) {
        errors.value[key] = 'This field is required'
        valid = false
      }
    }
    return valid
  }

  const reset = () => {
    values.value = { ...initialValues }
    errors.value = {}
  }

  return { values, errors, validate, reset }
}

Now use it in any form:

<script setup>
import { useFormValidation } from '@/composables/useFormValidation'

const rules = { email: { required: true }, password: { required: true } }
const { values, errors, validate } = useFormValidation(
  { email: '', password: '' },
  rules
)
</script>

<template>
  <input v-model="values.email" type="email" />
  <span v-if="errors.email">{{ errors.email }}</span>
</template>

This keeps logic decoupled and testable.

4. Keep Styling Flexible

Avoid hardcoding styles that limit reuse. Instead:

• Use CSS variables for theming
• Support class prop merging via $attrs
• Allow custom classes from the parent

<template>
  <div
    class="card"
    :class="$attrs.class"
  >
    <slot />
  </div>
</template>

<style>
.card {
  --card-padding: 1rem;
  padding: var(--card-padding);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>

Parent can now do:

<Card class="w-full max-w-md mx-auto" />

And it works.

Reusable components aren’t built in a day. Start small: take a frequently copied component, strip out hardcoded logic, add props and slots, and extract shared behavior into composables. Over time, you’ll build a library of Lego-like pieces that snap together effortlessly.

Basically, if you find yourself duplicating a component with small changes, it’s a sign it should be more reusable. Fix it once, use it everywhere.

The above is the detailed content of Building Reusable and Composable Vue Components. For more information, please follow other related articles on the PHP Chinese website!