Presentation-Focused Divider Behavior for Both Ecosystems

Both Vue 2’s Element UI and Vue 3’s Element Plus feature a el-divider component as a visual separator. Since it’s designed solely for layout clarity, neither version exposes events or public methods for external interaction. Core functionality relies almost entirely on prop configuration, making cross-version migration straightforward.

---

Vue 2 + Element UI Implementation

In Vue 2 projects, el-divider leverages a small set of intuitive props to adjust orientation and layout integration.

Key Props

• orientation: Controls divider axis, accepts horizontal (default) or vertical.

Practical Example

<template>
  <div class="divider-demo-v2">
    <!-- Horizontal separator between content blocks -->
    <div class="text-block">Header Content</div>
    <el-divider />
    <div class="text-block">Main Body Preview</div>

    <!-- Vertical separator between inline elements -->
    <div class="inline-group">
      <span>Profile</span>
      <el-divider orientation="vertical" />
      <span>Settings</span>
      <el-divider orientation="vertical" />
      <span>Help</span>
    </div>
  </div>
</template>

<style scoped>
.divider-demo-v2 .text-block {
  padding: 12px 0;
}
.divider-demo-v2 .inline-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
</style>

Note: Element UI must be registered globally in main.js for SFC access.

---

Vue 3 + Element Plus Implementation

Element Plus retains the same core prop structure for el-divider to minimize breaking changes, with minor internal styling updates for Vue 3’s reactivity system alignment.

Key Props

• orientation: Identical behavior to Vue 2’s version, defaulting to horizontal with vertical as an alternative.

Practical Example

<template>
  <div class="divider-demo-v3">
    <!-- Stacked horizontal dividers -->
    <div class="card-header">Dashboard Overview</div>
    <el-divider />
    <div class="card-body">Live metrics will render here</div>
    <el-divider />
    <div class="card-footer">Last updated 2 seconds ago</div>

    <!-- Vertical divider with adjusted spacing container -->
    <div class="status-badge-row">
      <span class="badge success">Online</span>
      <el-divider orientation="vertical" />
      <span class="badge warning">Limited Bandwidth</span>
    </div>
  </div>
</template>

<style scoped>
.divider-demo-v3 {
  max-width: 450px;
  margin: 0 auto;
}
.divider-demo-v3 .card-header,
.divider-demo-v3 .card-body,
.divider-demo-v3 .card-footer {
  padding: 10px 16px;
}
.divider-demo-v3 .status-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
}
.divider-demo-v3 .badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.divider-demo-v3 .success {
  background: #e6f7ff;
  color: #1890ff;
}
.divider-demo-v3 .warning {
  background: #fff7e6;
  color: #faad14;
}
</style>

Note: Global Elemant Plus registration is typically handled in main.js for Vue 3 applications.