Vue Modal & Dropdown Components

Accessible components with transitions and v-model support

Modal Component

This is a basic modal component with v-model support.

You can close it by clicking the X button, pressing Escape, or clicking outside.

Features:

  • v-model two-way binding
  • Keyboard navigation (Escape to close)
  • Click outside to close
  • Focus management
  • ARIA attributes for accessibility

This modal uses a scale transition effect.

You can customize the transition using the transition prop.

Available transitions:

  • fade (default)
  • slide
  • scale

Dropdown Component

Selected: {{ selectedOption }} No option selected {{ selectedFruit }}

Component Features

Modal Component

  • v-model support
  • Multiple transitions
  • Keyboard navigation
  • Click outside to close
  • ARIA attributes
  • Focus trapping

Dropdown Component

  • v-model support
  • Custom toggle slots
  • Keyboard navigation
  • Click outside to close
  • ARIA attributes
  • Custom styling