PHPackages                             omnitend/dashboard-for-laravel - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. omnitend/dashboard-for-laravel

ActiveLibrary[Admin Panels](/categories/admin)

omnitend/dashboard-for-laravel
==============================

Laravel dashboard components with Vue 3, Inertia, and Bootstrap Vue Next

v0.4.14(1mo ago)132MITVuePHP ^8.2CI failing

Since Nov 15Pushed 1mo agoCompare

[ Source](https://github.com/omnitend/dashboard-for-laravel)[ Packagist](https://packagist.org/packages/omnitend/dashboard-for-laravel)[ Docs](https://github.com/omnitend/dashboard-for-laravel)[ RSS](/packages/omnitend-dashboard-for-laravel/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (10)Dependencies (6)Versions (20)Used By (0)

Laravel Dashboard
=================

[](#laravel-dashboard)

[![npm version](https://camo.githubusercontent.com/86aa76cc446e7f7796e43930106a2c4f1945f5d23f075c6e5d731fe62f0fa095/68747470733a2f2f62616467652e667572792e696f2f6a732f406f6d6e6974656e6425324664617368626f6172642d666f722d6c61726176656c2e737667)](https://www.npmjs.com/package/@omnitend/dashboard-for-laravel)[![License: MIT](https://camo.githubusercontent.com/fdf2982b9f5d7489dcf44570e714e3a15fce6253e0cc6b5aa61a075aac2ff71b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667)](https://opensource.org/licenses/MIT)[![Tests](https://camo.githubusercontent.com/631ca083799cf230b24c71275bd2932aca05d76e45edd1c5cd264bb613a4f0c3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f74657374732d31313025323070617373696e672d627269676874677265656e)](https://github.com/omnitend/dashboard-for-laravel)[![TypeScript](https://camo.githubusercontent.com/c0b4207c916f2461fb4904dadc7c90547506a3bcf3c41fd3d23438e65a29c1fb/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f547970655363726970742d52656164792d626c7565)](https://www.typescriptlang.org/)

A full-stack package for building Laravel dashboards with Vue 3, Inertia.js, and Bootstrap Vue Next.

Documentation
-------------

[](#documentation)

📚 **[Browse Components](https://omnitend.github.io/dashboard-for-laravel/components)** | 📦 **[NPM Package](https://www.npmjs.com/package/@omnitend/dashboard-for-laravel)**

- [Getting Started Guide](https://omnitend.github.io/dashboard-for-laravel/guide/getting-started)
- [Installation Guide](https://omnitend.github.io/dashboard-for-laravel/guide/installation)
- [Component API Reference](https://omnitend.github.io/dashboard-for-laravel/components)
- [Form System Guide](https://omnitend.github.io/dashboard-for-laravel/guide/forms)
- [Theming Guide](https://omnitend.github.io/dashboard-for-laravel/guide/theming)
- [TypeScript Guide](https://omnitend.github.io/dashboard-for-laravel/guide/typescript)
- [Examples & Patterns](https://omnitend.github.io/dashboard-for-laravel/examples/common-patterns)

Features
--------

[](#features)

- **Form System**: Type-safe form handling with validation
- **Data Tables**: Paginated data tables with customizable columns
- **Navigation**: Responsive sidebar navigation
- **API Client**: Type-safe HTTP client with Laravel integration
- **Laravel Helpers**: Backend utilities for consistent API responses
- **MCP Server**: Query documentation via AI agents ([setup guide](MCP_SERVER.md))

Installation
------------

[](#installation)

### NPM Package

[](#npm-package)

```
npm install @omnitend/dashboard-for-laravel
```

### Composer Package

[](#composer-package)

```
composer require omnitend/dashboard-for-laravel
```

Frontend Usage
--------------

[](#frontend-usage)

### Forms

[](#forms)

#### Using `defineForm` (Recommended)

[](#using-defineform-recommended)

The `defineForm` helper provides type-safe form definitions with minimal boilerplate:

```

import { defineForm, DXForm } from "@omnitend/dashboard-for-laravel";

const loginForm = defineForm([
  {
    key: "email",
    type: "email",
    label: "Email",
    placeholder: "Enter your email",
    required: true,
    default: "",
  },
  {
    key: "password",
    type: "password",
    label: "Password",
    required: true,
    default: "",
  },
  {
    key: "remember",
    type: "checkbox",
    label: "Remember me",
    default: false,
  },
] as const);

const handleLogin = async () => {
  await loginForm.form.post("/login", {
    onSuccess: (data) => {
      window.location.href = data.redirect || "/dashboard";
    },
  });
};

```

#### Using `useForm` Directly

[](#using-useform-directly)

For more control, use `useForm` and `DXBasicForm`:

```

import { useForm, DXBasicForm, type FieldDefinition } from "@omnitend/dashboard-for-laravel";

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

const fields: FieldDefinition[] = [
  { key: "name", type: "text", label: "Name", required: true },
  { key: "email", type: "email", label: "Email", required: true },
];

const handleSubmit = async () => {
  await form.post("/api/users");
};

```

#### Supported Field Types

[](#supported-field-types)

- Text inputs: `text`, `email`, `password`, `number`, `url`, `tel`, `date`, `datetime-local`, `time`
- `textarea`
- `select` (requires `options` prop)
- `checkbox`
- `radio` (requires `options` prop)

#### Form Methods

[](#form-methods)

```
// Submit methods
await form.post("/api/users", options);
await form.put("/api/users/1", options);
await form.patch("/api/users/1", options);
await form.delete("/api/users/1", options);

// Form state
form.processing; // boolean
form.errors; // ValidationErrors
form.hasErrors; // computed boolean
form.recentlySuccessful; // boolean

// Form methods
form.reset(); // Reset to initial values
form.clearErrors(); // Clear all errors
form.clearError("email"); // Clear specific field error
```

### Data Tables

[](#data-tables)

```

      {{ formatDate(item.created_at) }}

import { ref } from "vue";
import { DXTable, type PaginationData, type TableField } from "@omnitend/dashboard-for-laravel";

interface User {
  id: number;
  name: string;
  email: string;
  created_at: string;
}

const users = ref([]);
const pagination = ref({
  currentPage: 1,
  perPage: 15,
  total: 0,
});

const fields: TableField[] = [
  { key: "id", label: "ID", sortable: true },
  { key: "name", label: "Name", sortable: true },
  { key: "email", label: "Email" },
  { key: "created_at", label: "Created" },
];

const fetchUsers = async (page: number = 1) => {
  // Fetch logic here
};

```

### Dashboard Layout

[](#dashboard-layout)

```

      Welcome to the Dashboard

import { DXDashboard, DCard, type Navigation } from "@omnitend/dashboard-for-laravel";

const navigation: Navigation = [
  {
    label: "Main",
    items: [
      { label: "Dashboard", url: "/dashboard" },
      { label: "Users", url: "/users" },
    ],
  },
  {
    label: "Settings",
    items: [
      { label: "Profile", url: "/profile" },
      { label: "Logout", url: "/logout" },
    ],
  },
];

const currentUrl = "/dashboard";
const user = { name: "John Doe", email: "john@example.com" };

```

Backend Usage
-------------

[](#backend-usage)

### Form Request

[](#form-request)

```