Design components to do one thing well, be generic, and use props and events for communication; 2. Use props for input and emit events for output, defining types and using emits for clarity; 3. Use slots—especially named and default slots—to enable flexible content insertion; 4. Apply scoped styles and CSS variables to prevent conflicts and allow theme customization; 5. Organize reusable components in a dedicated folder like UI/ and export them via an index file for easy importing; additionally, document components, validate props, avoid hardcoded text, and write tests to ensure reliability and maintainability—this approach ensures truly reusable Vue components.

Creating reusable components in Vue is one of the core strengths of the framework. Well-designed components can be used across different parts of your app or even in other projects, saving time and keeping your codebase clean. Here’s how to build truly reusable Vue components effectively.

1. Design for Reusability from the Start

Before writing any code, think about what makes a component reusable:

• It should do one thing well (follow the single responsibility principle).
• It should be generic, not tied to a specific page or context.
• It should accept input via props and emit events instead of manipulating external state directly.

For example, instead of creating a "UserDeleteButton" that only works for users, create a generic ConfirmButton that asks for confirmation before triggering an action.

<!-- ConfirmButton.vue -->
<template>
  <button @click="onClick">
    {{ label }}
  </button>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    },
    confirmMessage: {
      type: String,
      default: 'Are you sure?'
    }
  },
  methods: {
    onClick() {
      if (window.confirm(this.confirmMessage)) {
        this.$emit('confirmed');
      }
    }
  }
};
</script>

Now you can reuse it anywhere:

<ConfirmButton
  label="Delete User"
  confirmMessage="Delete this user? This can't be undone."
  @confirmed="handleDelete"
/>

2. Use Props and Events Properly

Props let parents pass data down; events let children communicate back up. This unidirectional flow makes components predictable and reusable.

Best practices:

• Define clear prop types and defaults.
• Use emits option to declare custom events (Vue 3) or validate them (Vue 2 with vue-emits plugin or manually).
• Avoid mutating props directly — instead, emit an event.

Example: A reusable input component

<!-- TextInput.vue -->
<template>
  <div>
    <label v-if="label">{{ label }}</label>
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
      :type="type"
      :placeholder="placeholder"
    />
  </div>
</template>

<script>
export default {
  props: ['modelValue', 'label', 'type', 'placeholder'],
  emits: ['update:modelValue']
};
</script>

Use it with v-model:

<TextInput v-model="username" label="Username" placeholder="Enter username" />

Note: In Vue 3, modelValue update:modelValue is the default for v-model. You can customize it with argument syntax if needed.

3. Leverage Slots for Flexibility

Slots allow you to pass template fragments into components, making them more flexible than props alone.

Use cases:

• Wrapper components (cards, modals, layouts)
• Components with dynamic content

Example: A reusable card component

<!-- Card.vue -->
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header">
        <h3>{{ title }}</h3>
      </slot>
    </div>
    <div class="card-body">
      <slot />
    </div>
    <div class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
export default {
  props: ['title']
};
</script>

Usage:

<Card title="Profile">
  <p>User profile information goes here.</p>
  <template #footer>
    <button>Save</button>
  </template>
</Card>

This way, the same Card can be used in many contexts with different content.

4. Keep Styles Scoped and Theme-Friendly

To avoid style conflicts and ensure reusability:

• Use scoped styles or CSS classes with unique names.
• Use CSS variables for theming so styles can be customized without rewriting.

<style scoped>
.card {
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  padding: 16px;
  background: var(--card-bg, #fff);
}
</style>

Now consumers can override appearance:

<Card style="--card-bg: #f0f8ff; --border-color: #9ec5ff" />

5. Organize and Export Components Properly

Place reusable components in a dedicated folder like components/UI/ or components/Shared/.

Example structure:

src/
└── components/
    └── UI/
        Button.vue
        Input.vue
        Modal.vue
        Card.vue

You can create an index file to export them:

// @/components/UI/index.js
export { default as UIButton } from './Button.vue';
export { default as UIInput } from './Input.vue';
export { default as UICard } from './Card.vue';

Then import anywhere:

import { UIButton, UICard } from '@/components/UI';

In larger apps, consider publishing common components as a separate package (e.g., using Vite Vue Component Library setup).

Bonus Tips

• Document your components: Use comments or tools like Storybook to show usage examples.
• Validate props aggressively: Helps catch errors early and makes usage clearer.
• Avoid hardcoding text: Use props or i18n support for labels.
• Test them: Especially if used widely, write unit tests for edge cases.

Reusable Vue components aren’t just about code — they’re about designing flexible, predictable interfaces. Focus on clear APIs (props/events/slots), avoid side effects, and think about how others (or future you) will use the component.

Basically: props in, events out, slots for content, and styles that don’t clash. That’s the recipe.

The above is the detailed content of How to create reusable components in Vue. For more information, please follow other related articles on the PHP Chinese website!