Getting Started

Getting Started

Alpha Notice: v0.x — expect changes between minor versions.

Dashboard for Laravel is a Vue 3 component library for building admin dashboards with Laravel, Inertia.js, and Bootstrap. Built and maintained by Omni Tend.

What’s Included

  • 61 Vue 3 components (55 base + 6 extended)
  • D Wrapper Components* — Type-safe wrappers around Bootstrap Vue Next
  • DX Extended Components* — Dashboard layouts, forms, and tables
  • Form System — Type-safe form handling with validation
  • Composables — useForm and other utilities
  • Theme — Bootstrap 5 SCSS theme
  • PHP Utilities — Laravel helpers for API responses and form requests

Quick Start

Install the package:

npm install @omnitend/dashboard-for-laravel

Import the CSS in your app entry (e.g., resources/js/app.ts or main.ts):

import '@omnitend/dashboard-for-laravel/theme.css'

Use components:

<script setup lang="ts">
import { DCard, DButton, useForm } from '@omnitend/dashboard-for-laravel'

const form = useForm({
  name: '',
  email: '',
})

const handleSubmit = async () => {
  await form.post('/api/users')
}
</script>

<template>
  <DCard>
    <template #header>
      <h3>Create User</h3>
    </template>

    <form @submit.prevent="handleSubmit">
      <input v-model="form.data.name" placeholder="Name" />
      <input v-model="form.data.email" placeholder="Email" />
      <DButton type="submit" variant="primary">Save</DButton>
    </form>
  </DCard>
</template>

D* Wrapper Components

All Bootstrap Vue Next components are wrapped in D* components. This provides:

  • Type safety with TypeScript
  • Consistent API
  • Proper slot and prop forwarding

For example, BButton becomes DButton, BCard becomes DCard.

For complete prop documentation, refer to the Bootstrap Vue Next docs.

DX* Extended Components

Extended components provide dashboard-specific functionality:

  • DXDashboard - Complete dashboard layout with sidebar and navbar
  • DXTable - Data table with pagination, sorting, and modals
  • DXForm / DXBasicForm - Form builders from field definitions

Form System

The useForm composable provides:

  • Form state management
  • HTTP methods (post, put, patch, delete)
  • Validation error handling
  • Processing state
const form = useForm({ name: '', email: '' })

// Submit
await form.post('/api/users')

// State
form.processing   // boolean
form.errors       // validation errors
form.hasErrors    // computed boolean

See the Forms guide for more details.

Next Steps