Laravel Nuxt UI Starter Kit

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:

• Laravel
• Inertia.js
• Nuxt UI
• TailwindCSS
• Spatie Laravel Data

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.