Páginas · Laravilt
Frontend
Vue 3 components and frontend architecture
Vue 3 components for building admin panels with Laravilt.
Technology Stack
| Technology | Description |
|---|---|
| Vue 3 | Composition API with <script setup> |
| TypeScript | Full type safety |
| Inertia.js v2 | SPA-like experience |
| Tailwind CSS | Utility-first styling |
| Reka UI | Accessible primitives |
| Lucide Icons | Icon library |
Installation
$ pnpm add @laravilt/support @laravilt/schemasDocumentation
UI Components
Standalone UI components for any Vue project.
| Component | Description |
|---|---|
| Button | Button variants and sizes |
| Dialog | Modal dialogs |
| Sheet | Slide-out panels |
| Card | Content cards |
| Badge | Status badges |
| Alert | Alert messages |
| Avatar | User avatars |
| Dropdown | Dropdown menus |
| Tabs | Tab navigation |
| Tooltip | Hover tooltips |
Form Components
Form input components with validation.
| Component | Description |
|---|---|
| Input | Text inputs |
| Select | Select dropdowns |
| Checkbox | Checkboxes |
| Switch | Toggle switches |
Chart Components
Dashboard chart components.
| Component | Description |
|---|---|
| LineChart | Line/area charts |
| BarChart | Bar charts |
| PieChart | Pie/doughnut charts |
| StatsCard | Statistics cards |
Quick Start
Import Components
typescript
Example Page
vue
Vue Package Mapping
| PHP Package | Vue Package |
|---|---|
laravilt/forms | @laravilt/forms |
laravilt/tables | @laravilt/tables |
laravilt/schemas | @laravilt/schemas |
laravilt/widgets | @laravilt/widgets |
laravilt/infolists | @laravilt/infolists |
laravilt/notifications | @laravilt/notifications |
laravilt/actions | @laravilt/actions |
laravilt/support | @laravilt/support |
Related Documentation
- Introduction - Frontend overview
- Styling - Tailwind CSS configuration
- Layouts - Page layouts
- Utilities - Helper functions
- App Components - Application components (NavMain, Page, Form, Table)