Pages · Laravilt

Frontend (Vue & React)

How the Laravilt frontend is structured for the Vue and React stacks, and how to customize it.

Laravilt renders every panel with Inertia.js. You build resources, pages, forms and tables in PHP. The frontend shell (layouts, sidebar, header, UI primitives) is published into your application, so you own it and can change it.

Two frontend stacks are supported:

	Vue stack	React stack
Framework	Vue 3 (`<script setup>`, TypeScript)	React 19 (TypeScript)
UI primitives	shadcn-vue (Reka UI)	shadcn/ui (Radix UI)
Inertia adapter	`@inertiajs/vue3`	`@inertiajs/react` v3 + `@inertiajs/vite`
Icons	`lucide-vue-next`	`lucide-react`
Styling	Tailwind CSS v4	Tailwind CSS v4
Entry point	`resources/js/app.ts`	`resources/js/app.tsx`

React support requires Laravilt v1.1 or later.

Choosing a Stack

The stack is chosen when you install:

bash

Without --stack, the installer asks, defaulting to the stack it detects in your package.json. The choice is written to .env and .env.example:

env

It is read from the laravilt-support.frontend config key. In PHP you can check it with Laravilt\Support\Frontend::stack(), Frontend::isVue() or Frontend::isReact(). Generators follow the stack. For example, php artisan laravilt:page creates resources/js/pages/{Panel}/{Name}.vue or .tsx, and php artisan make:form-component {name} --vue|--react scaffolds a custom form component.

See Frontend Stacks for a full comparison.

What Gets Published

Vue stack. The installer publishes package.json, vite.config.ts, resources/js/app.ts, resources/css/app.css, and these app-owned folders under resources/js/:

text

React stack. The installer publishes the files listed in the panel package's stubs/react/manifest.php:

text

Where Laravilt Pages Come From

The resource list, create, edit and view pages, the dashboard and the auth pages are not copied into your app. They are resolved straight from vendor/. Your app.ts / app.tsx resolves an Inertia page in this order:

resources/js/pages/ (your pages, which can override a vendor page with the same name)
vendor/laravilt/panel/resources/{js|react}/pages
vendor/laravilt/auth/...
vendor/laravilt/ai/...

Vite aliases @laravilt/<package> to vendor/laravilt/<package>/resources/js (Vue) or resources/react (React), so package sources are compiled as part of your app. For example, the entry point imports @laravilt/forms/app and @laravilt/notifications/app.

Importing Components

UI primitives live in your app, so import them with the @/ alias:

vue

tsx

Republishing Frontend Files

The panel package registers these publish tags (they follow the configured stack):

Tag	Publishes
`laravilt-panel-ui`	UI primitives to `resources/js/components/ui`
`laravilt-panel-lib`	`resources/js/lib/utils.ts`
`laravilt-panel-components`	`NavMain.vue` / `nav-main.tsx`
`laravilt-panel-views`	Panel pages to `resources/js/pages/laravilt` (to override them)
`laravilt-panel-assets`	Panel components to `resources/js/components/laravilt`