fusigabs / laranuxtui-kit
The skeleton application for the Laravel framework.
Installs: 8
Dependents: 0
Suggesters: 0
Security: 0
Stars: 4
Watchers: 0
Forks: 0
Open Issues: 0
Language:Vue
Type:project
Requires
- php: ^8.2
- inertiajs/inertia-laravel: ^2.0
- laravel/framework: ^12.0
- laravel/tinker: ^2.10.1
- spatie/laravel-data: ^4.15
- spatie/laravel-typescript-transformer: ^2.5
- tightenco/ziggy: ^2.4
Requires (Dev)
- fakerphp/faker: ^1.23
- laravel/pail: ^1.2.2
- laravel/pint: ^1.18
- laravel/sail: ^1.41
- mockery/mockery: ^1.6
- nunomaduro/collision: ^8.6
- pestphp/pest: ^3.8
- pestphp/pest-plugin-laravel: ^3.2
This package is auto-updated.
Last update: 2025-09-11 16:46:16 UTC
README
A Laravel starter kit using Inertia.js, Nuxt UI and Tailwind v4.
Introduction
This is a simple Laravel starter kit that uses NuxtUI with Inertia.js. It also incorporates Spatie Laravel Data which transforms Data Transfer Objects to TypeScript types that can be used in the frontend.
Installation
You can use the Laravel Installer to install this starterkit.
laravel new my-app --using=fusigabs/laranuxtui-kit
Then, run comopser run dev
to run the asset watcher, and you're good to go!
Built With
Below is a list of all the technologies this starter kit has been built with:
Example Data Transfer Object
This starterkit can be used very similar to the current official laravel starterkits, except that it includes Spatie Laravel Data for Data Transfer Objects. You can use the Laravel Installer to install this starterkit.
<?php namespace App\Data\User; use App\Models\User; use Spatie\LaravelData\Data; use Illuminate\Database\Eloquent\Model; use Spatie\TypeScriptTransformer\Attributes\TypeScript; #[TypeScript()] class AuthUserData extends Data { public function __construct( public int $id, public string $name, public string $email, public bool $isVerified, public string|null $avatar ) {} public static function fromModel(User|Model $user): self { return new self( id: $user->id, name: $user->name, email: $user->email, isVerified: !is_null($user->verified_at), avatar: $user->avatar ); } }
The above will generate a typescript type in resources/js/types/generated.d.ts
with the following structure:
declare namespace App.Data.User { export type AuthUserData = { id: number; name: string; email: string; isVerified: boolean; avatar: string | null; }; }
Use the Data Transfer Object in a controller to pass data to the frontend:
<?php namespace App\Http\Controllers\Settings; use Inertia\Inertia; use Inertia\Response; use Illuminate\Http\Request; use App\Data\User\AuthUserData; use Illuminate\Support\Facades\Auth; use App\Http\Controllers\Controller; use Illuminate\Http\RedirectResponse; use Illuminate\Contracts\Auth\MustVerifyEmail; use App\Http\Requests\Settings\ProfileUpdateRequest; class ProfileController extends Controller { public function index(Request $request) { return Inertia::render('profile', [ 'user' => AuthUserData::fromModel($request->user()) ]); } }
You can use this in your vue components like this (in profile.vue
)
<script setup lang='ts'> defineProps<{ user: App.Data.User.AuthUserData }>() </script> <template> {{user.name}} </template>
License
The MIT License (MIT). Please see License File for more information.