README

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.

ghostcompiler / laravel-vue-vuesax

Maintainers

Package info

Statistics

Security