laravel-vue-vuesax maintained by ghostcompiler
ghostcompiler/laravel-vue-vuesax
A Laravel 13 starter built from a blank laravel/laravel project with Vue 3, Inertia, Vite, JSX support, SSR, Vuesax, Boxicons, and vue-sonner.
The kit is inspired by the official Laravel Vue starter kit, but this project is configured for JavaScript and JSX instead of TypeScript/TSX.
Stack
- Laravel 13
- PHP 8.3+
- Vue 3
- Inertia Laravel 3
- Vite 8
- Tailwind CSS 4
- Vuesax Alpha for Vue 3
- vue-sonner
- Vue JSX via
@vitejs/plugin-vue-jsx - Inertia SSR via
resources/js/ssr.js
Installation
Create a new project directly from this starter:
composer create-project ghostcompiler/laravel-vue-vuesax
Or use the Laravel installer:
laravel new project --using=ghostcompiler/laravel-vue-vuesax
After creating the project, install dependencies and prepare the app:
composer install
npm install
cp .env.example .env
php artisan key:generate
php artisan migrate
Development
composer run dev
This starts Laravel, the queue listener, Laravel Pail, and Vite together.
For Vite only:
npm run dev
Production Build
npm run build
SSR Build
npm run build:ssr
SSR is configured through the Laravel Vite plugin:
- Client entry:
resources/js/app.js - SSR entry:
resources/js/ssr.js - Root Blade view:
resources/views/app.blade.php - Inertia middleware:
app/Http/Middleware/HandleInertiaRequests.php
Start the SSR server in production with:
php artisan inertia:start-ssr
Artisan Generators
This kit includes frontend-focused generators for JSX projects.
php artisan make:page Billing/Index
php artisan make:componet Ui/MetricCard
php artisan make:lib theme/colors
php artisan make:layout AppShell
make:page
Creates an Inertia JSX page in:
resources/js/Pages
make:componet
Creates a Vue JSX component in:
resources/js/Components
The command name intentionally follows the requested spelling. Laravel already ships with make:component for Blade components.
make:lib
Creates a JavaScript library module in:
resources/js/lib
make:layout
Creates a Vue JSX layout in:
resources/js/Layouts
Welcome Page
The welcome page is a full Inertia page at:
resources/js/Pages/Welcome.vue
It includes:
- Vuesax sidebar based on the provided snippet
- Dashboard metrics
- Vuesax buttons, switch, avatars, alerts, inputs, button groups, and sidebar groups
- vue-sonner toast preview
- Theme token preview
- Generator command documentation
All UI for the preview is kept inside the single welcome page.
Theme
Theme tokens live in resources/css/app.css as CSS variables and are mirrored into Vuesax during app setup.
Main tokens:
--kit-bg--kit-panel--kit-panel-soft--kit-text--kit-muted--kit-border--kit-primary--kit-success--kit-warning--kit-danger--kit-accent
The welcome page also includes a dark-mode toggle using the .dark-theme class.
Vuesax Notes
The original Vuesax documentation points to vuesax@next, but that package is still built on Vue 2 internals. This kit uses vuesax-alpha, the Vue 3 compatible Vuesax package, and registers it globally in the browser entry. The SSR entry includes matching server-side component shims so the first HTML response remains meaningful and stable.
vue-sonner
vue-sonner is installed and used directly in the welcome page:
import { Toaster, toast } from 'vue-sonner';
The page renders <Toaster /> and exposes toast actions in the header and hero.
Project Structure
app/Console/Commands
app/Http/Middleware/HandleInertiaRequests.php
resources/css/app.css
resources/js/app.js
resources/js/ssr.js
resources/js/Pages/Welcome.vue
resources/views/app.blade.php
routes/web.php
vite.config.js
References
Development And Build Environment
This package was developed using ServBay as the local development environment.
Development Tool Used
- Local development tool:
ServBay - Website: www.servbay.com
ServBay your developement friend
Testing And Build Machine
- Tested on:
Mac M4 - Built on:
Mac M4