LARAVILT
Laravilt
Pages · Laravilt

Vue Components

Documentation for Laravilt's Vue 3 components.

Laravilt provides a comprehensive set of Vue 3 components for building admin panels.

The main sidebar navigation component with support for:

  • Navigation Groups - Collapsible groups with icons and labels
  • Badge Support - Display counts or status badges on items
  • Active State Detection - Automatic highlighting based on current URL
  • Cluster Support - activeMatchPrefix for matching URL prefixes
vue

NavItem Interface

typescript

AppHeader.vue

The top header component featuring:

  • Global Search - Searchable navigation and records
  • Breadcrumbs - Current location display
  • User Menu - Profile, settings, and logout
  • Theme Toggle - Light/dark mode switching

AppSidebar.vue

The main sidebar container with:

  • Collapsible State - Icon-only mode when collapsed
  • Dropdown Navigation - Groups show as dropdowns when collapsed
  • Persistent State - Remembers collapsed/expanded state

UI Components

Button

Multiple button variants:

vue

Dialog

Modal dialogs for confirmations and forms:

vue

Badge

Status badges with color variants:

vue

Card

Content cards with header, content, and footer:

vue

Collapsible sidebar with groups:

vue

Context menus and dropdown actions:

vue

Laravilt Components

Located in components/laravilt/:

Page.vue

The main page component for resource list views with:

  • View Toggle - Switch between table, grid, and API views
  • Infinite Scroll - Load more data as you scroll
  • Filters - Advanced filtering interface
  • Bulk Actions - Select and act on multiple records
  • Sorting - Click column headers to sort

Form.vue

Dynamic form rendering with:

  • Field Types - All 30+ field types supported
  • Validation - Real-time validation feedback
  • Conditional Fields - Show/hide based on conditions
  • Sections & Tabs - Organized form layouts

Table.vue

Data table component with:

  • Sortable Columns - Click to sort
  • Searchable - Global and column search
  • Selectable Rows - Checkbox selection
  • Row Actions - Edit, view, delete actions
  • Reorderable - Drag and drop row ordering

Best Practices

Use Composition API

Always use Vue 3 Composition API with <script setup>:

vue

Type Your Props

Use TypeScript interfaces for props:

vue

For navigation, use Inertia's Link component:

vue