PHPackages                             jkque/laravel-nuxt-ui-starter-kit - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. jkque/laravel-nuxt-ui-starter-kit

ActiveProject[Framework](/categories/framework)

jkque/laravel-nuxt-ui-starter-kit
=================================

A production-ready Laravel 12 starter kit with Vue 3, Inertia.js v2, Nuxt UI components, and Tailwind CSS v4. Complete authentication, beautiful UI components, and modern developer tools included.

1801.1k↓50%23[3 PRs](https://github.com/jkque/laravel-nuxt-ui-starter-kit/pulls)VueCI passing

Since Oct 26Pushed 6mo ago2 watchersCompare

[ Source](https://github.com/jkque/laravel-nuxt-ui-starter-kit)[ Packagist](https://packagist.org/packages/jkque/laravel-nuxt-ui-starter-kit)[ RSS](/packages/jkque-laravel-nuxt-ui-starter-kit/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Laravel Nuxt UI Starter Kit
===========================

[](#laravel-nuxt-ui-starter-kit)

A production-ready Laravel 12 starter kit with Vue 3, Inertia.js v2, Nuxt UI components, and Tailwind CSS v4. Built for developers who want to start their next web application with modern tools and best practices already configured.

Why Use This Starter Kit?
-------------------------

[](#why-use-this-starter-kit)

Skip the repetitive setup and start building features immediately. This starter kit provides:

- **Zero Configuration**: Everything is pre-configured and ready to use
- **Best Practices**: Modern architecture patterns and coding standards built-in
- **Full Authentication**: Complete auth system you can customize or use as-is
- **Beautiful UI**: Nuxt UI component library with Tailwind CSS v4
- **Type Safety**: TypeScript on frontend, PHP 8.2+ with strict types on backend
- **Developer Tools**: Testing, linting, formatting, and quality checks ready to go
- **Example Code**: Reference implementations for common patterns

Perfect for MVPs, SaaS applications, internal tools, or any Laravel project needing a modern frontend.

Installation
------------

[](#installation)

### Via Laravel Installer

[](#via-laravel-installer)

You may create a new project using the [Laravel installer](https://laravel.com/docs/12.x/installation#creating-a-laravel-project):

```
laravel new my-app --using=jkque/laravel-nuxt-ui-starter-kit
```

### Via Composer

[](#via-composer)

Or, you can create a new project using Composer's `create-project` command:

```
composer create-project jkque/laravel-nuxt-ui-starter-kit my-app
```

After creating the project, start the development server:

```
cd my-app
composer run dev
```

This will:

- Install all PHP and JavaScript dependencies
- Set up your environment configuration
- Run database migrations
- Build frontend assets
- Start Laravel server, queue worker, logs viewer, and Vite dev server

Your application will be available at `http://localhost:8000`.

### Alternative: Clone Repository

[](#alternative-clone-repository)

You can also clone this repository directly:

```
git clone https://github.com/jkque/laravel-nuxt-ui-starter-kit.git my-app
cd my-app
composer setup
composer run dev
```

Quick Start
-----------

[](#quick-start)

Once installed, you can immediately:

1. **Access your application** at `http://localhost:8000`
2. **Register a new account** using the built-in authentication
3. **Explore the dashboard** and sample pages
4. **Review the code** in `resources/js/pages/` to see implementation examples
5. **Start building** your features using the included components and patterns

The starter kit includes:

- Pre-built authentication pages (login, register, password reset, 2FA)
- Dashboard with example layouts and components
- Settings pages demonstrating forms and user preferences
- Type-safe routing with Laravel Wayfinder
- Configured testing environment with Pest

What's Included
---------------

[](#whats-included)

This starter kit comes with everything you need to build modern web applications:

### Authentication & Authorization

[](#authentication--authorization)

- Complete authentication system powered by Laravel Fortify
- Login, registration, and email verification
- Password reset functionality
- Two-factor authentication support
- Email verification
- Password confirmation for sensitive actions

### Frontend Stack

[](#frontend-stack)

- **Vue 3** with TypeScript support
- **Inertia.js v2** for seamless SPA experience without API complexity
- **Nuxt UI** component library for beautiful, accessible UI components
- **Tailwind CSS v4** for utility-first styling
- **Lucide Vue** icons
- **Vite** for lightning-fast development and optimized production builds
- Server-Side Rendering (SSR) support with Inertia

### Sample Application Pages

[](#sample-application-pages)

- Welcome/landing page
- Dashboard with example UI
- Customer management page
- Inbox interface
- Settings pages (Profile, Security, Notifications, Members)
- Complete authentication flow pages

### Backend Features

[](#backend-features)

- **Laravel 12** with modern PHP 8.2+ features
- **Laravel Wayfinder** for type-safe routing between Laravel and Vue
- **Laravel Horizon** for queue monitoring and management
- **Database queue driver** configured by default
- SQLite database (easily switchable to MySQL/PostgreSQL)
- Session and cache management

### Developer Experience

[](#developer-experience)

- **Pest PHP** testing framework with 100% coverage requirements
- **PHPStan** for static analysis
- **Laravel Pint** for PHP code formatting
- **Rector** for automated refactoring
- **ESLint** and **Prettier** for JavaScript/Vue formatting
- Type coverage analysis
- Concurrent development server (Laravel + Queue + Logs + Vite)
- **Laravel Pail** for beautiful log viewing
- **Laravel Sail** Docker environment included

### Code Quality Tools

[](#code-quality-tools)

- Automated code formatting and linting
- 100% test coverage enforcement
- 100% type coverage requirements
- Pre-configured testing scripts
- Parallel test execution

Requirements
------------

[](#requirements)

- PHP ^8.2
- Composer
- Node.js & npm
- SQLite (default) or MySQL/PostgreSQL

Manual Setup
------------

[](#manual-setup)

If you cloned the repository directly and need to set up manually, or want to customize the installation process:

#### 1. Install Dependencies

[](#1-install-dependencies)

```
# Install PHP dependencies
composer install

# Install JavaScript dependencies
npm install
```

#### 2. Environment Configuration

[](#2-environment-configuration)

```
# Copy environment file
cp .env.example .env

# Generate application key
php artisan key:generate
```

#### 3. Database Setup

[](#3-database-setup)

By default, this project uses SQLite. The database file will be created automatically during migration.

If you prefer MySQL or PostgreSQL, update your `.env` file:

```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password
```

Run migrations:

```
php artisan migrate
```

#### 4. Build Frontend Assets

[](#4-build-frontend-assets)

```
npm run build
```

### What's Next?

[](#whats-next)

After installation, you can:

1. **Start Development**: Run `composer run dev` to start all development services
2. **Explore Sample Pages**: Visit the dashboard, settings, and other pre-built pages
3. **Customize Authentication**: Modify the authentication pages and flow to match your needs
4. **Build Your Features**: Use the included components and patterns as a starting point
5. **Add Your Routes**: Define new routes in `routes/web.php` and create corresponding Inertia pages
6. **Customize UI**: Leverage Nuxt UI components and Tailwind CSS for your design

The starter kit includes example pages demonstrating common patterns like forms, tables, navigation, and layouts. Use these as references while building your application.

Development
-----------

[](#development)

### Using This Starter Kit

[](#using-this-starter-kit)

This starter kit is structured to help you build applications quickly:

- **Pages**: Create new Inertia pages in `resources/js/pages/`
- **Components**: Reusable Vue components in `resources/js/components/`
- **Layouts**: Page layouts in `resources/js/layouts/`
- **Routes**: Define routes in `routes/web.php` using Laravel Wayfinder for type-safety
- **Actions**: Backend actions in `resources/js/actions/`
- **Composables**: Reusable composition functions in `resources/js/composables/`

### Start Development Server

[](#start-development-server)

The easiest way to start all development services:

```
composer run dev
```

This concurrently runs:

- Laravel development server (port 8000)
- Queue worker
- Log viewer (Laravel Pail)
- Vite dev server (hot module replacement)

### Individual Services

[](#individual-services)

You can also run services individually:

```
# Laravel server
php artisan serve

# Vite dev server (hot reload)
npm run dev

# Queue worker
php artisan queue:listen

# Log viewer
php artisan pail
```

### Server-Side Rendering (SSR)

[](#server-side-rendering-ssr)

To run with Inertia SSR:

```
composer run dev:ssr
```

Laravel Sail (Docker)
---------------------

[](#laravel-sail-docker)

This project includes Laravel Sail for Docker-based development.

### Start Sail

[](#start-sail)

```
# Start containers
./vendor/bin/sail up -d

# Run migrations
./vendor/bin/sail artisan migrate

# Install JavaScript dependencies
./vendor/bin/sail npm install

# Build assets
./vendor/bin/sail npm run build
```

### Common Sail Commands

[](#common-sail-commands)

```
# Run Artisan commands
./vendor/bin/sail artisan

# Run tests
./vendor/bin/sail test

# Run specific test
./vendor/bin/sail test --filter

# Composer commands
./vendor/bin/sail composer

# NPM commands
./vendor/bin/sail npm

# Access shell
./vendor/bin/sail shell
```

Testing
-------

[](#testing)

This project uses **Pest** as the testing framework. All tests are written using Pest's expressive syntax.

### Run All Tests

[](#run-all-tests)

```
composer test
```

This runs:

- Type coverage analysis (requires 100%)
- Unit and feature tests with coverage (requires 100% coverage)
- Code style checks (Pint, Rector, Prettier)
- Static analysis (PHPStan)

### Run Specific Test Suites

[](#run-specific-test-suites)

```
# All Pest tests
php artisan test

# Specific test file
php artisan test tests/Feature/ExampleTest.php

# Filter by test description
php artisan test --filter="test description"

# Run with coverage
composer run test:unit

# Type coverage check
composer run test:type-coverage

# Static analysis
composer run test:types
```

### With Laravel Sail

[](#with-laravel-sail)

```
# All tests
./vendor/bin/sail test

# Feature tests only
./vendor/bin/sail test --testsuite=Feature

# Unit tests only
./vendor/bin/sail test --testsuite=Unit

# With coverage
./vendor/bin/sail test --coverage

# Filter by test description
./vendor/bin/sail test --filter="creates user"
```

### Writing Pest Tests

[](#writing-pest-tests)

Tests use Pest's expressive syntax:

```
it('creates a new user', function () {
    $user = User::factory()->create();

    expect($user)->toBeInstanceOf(User::class)
        ->and($user->email)->not->toBeEmpty();
});

test('user can login', function () {
    $user = User::factory()->create();

    $response = $this->post('/login', [
        'email' => $user->email,
        'password' => 'password',
    ]);

    $response->assertSuccessful();
});
```

Create new tests with:

```
# Feature test
php artisan make:test UserTest --pest

# Unit test
php artisan make:test UserTest --pest --unit
```

Code Quality
------------

[](#code-quality)

### Linting & Formatting

[](#linting--formatting)

```
# Fix all code style issues
composer run lint

# Check code style without fixing
composer run test:lint
```

Individual tools:

```
# PHP - Laravel Pint
vendor/bin/pint

# PHP - Rector
vendor/bin/rector

# JavaScript - ESLint
npm run lint

# JavaScript - Prettier
npm run format

# Check formatting
npm run format:check
```

Technology Stack
----------------

[](#technology-stack)

### Backend

[](#backend)

- Laravel 12
- PHP 8.2+
- Inertia.js Laravel adapter v2
- Laravel Fortify (authentication)
- Laravel Horizon (queue monitoring)
- Laravel Wayfinder (routing)

### Frontend

[](#frontend)

- Vue 3
- Inertia.js v2
- Tailwind CSS v4
- Nuxt UI (component library)
- TypeScript
- Vite

### Development Tools

[](#development-tools)

- Pest (testing framework)
- Laravel Pint (code formatter)
- PHPStan (static analysis)
- Rector (automated refactoring)
- ESLint & Prettier

Project Structure
-----------------

[](#project-structure)

```
.
├── app/                    # Application code
│   ├── Http/              # Controllers, middleware, requests
│   ├── Models/            # Eloquent models
│   └── ...
├── bootstrap/             # Application bootstrap
├── config/                # Configuration files
├── database/              # Migrations, seeders, factories
├── public/                # Public assets
├── resources/             # Views, JavaScript, CSS
│   ├── js/
│   │   ├── Pages/        # Inertia.js pages
│   │   └── Components/   # Vue components
│   └── css/
├── routes/                # Route definitions
├── storage/               # Application storage
├── tests/                 # Test files
│   ├── Feature/          # Feature tests
│   └── Unit/             # Unit tests
└── vendor/                # Composer dependencies

```

Environment Variables
---------------------

[](#environment-variables)

Key environment variables to configure:

```
# Application
APP_NAME=Laravel
APP_ENV=local
APP_DEBUG=true
APP_URL=http://localhost

# Database
DB_CONNECTION=sqlite

# Session & Cache
SESSION_DRIVER=database
CACHE_STORE=database
QUEUE_CONNECTION=database

# Mail
MAIL_MAILER=log
```

Troubleshooting
---------------

[](#troubleshooting)

### Frontend Changes Not Showing

[](#frontend-changes-not-showing)

If you don't see frontend changes reflected in the browser:

```
# Rebuild assets
npm run build

# Or restart dev server
npm run dev
```

### Vite Manifest Error

[](#vite-manifest-error)

If you encounter "Unable to locate file in Vite manifest" error:

```
npm run build
```

### Permission Issues

[](#permission-issues)

If you encounter permission issues with storage or cache:

```
chmod -R 775 storage bootstrap/cache
```

Additional Resources
--------------------

[](#additional-resources)

- [Laravel Documentation](https://laravel.com/docs)
- [Vue 3 Documentation](https://vuejs.org/)
- [Inertia.js Documentation](https://inertiajs.com/)
- [Tailwind CSS Documentation](https://tailwindcss.com/)
- [Nuxt UI Documentation](https://ui.nuxt.com/)
- [Pest Documentation](https://pestphp.com/)

License
-------

[](#license)

This project is open-sourced software licensed under the MIT license.

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance46

Moderate activity, may be stable

Popularity37

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity13

Early-stage or recently created project

 Bus Factor1

Top contributor holds 90.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/3e08e73daf5962fe05c21a8ee9a721cf273a6348dcb3996a18fa59261ebabe2d?d=identicon)[jkque](/maintainers/jkque)

---

Top Contributors

[![jkque](https://avatars.githubusercontent.com/u/5366722?v=4)](https://github.com/jkque "jkque (10 commits)")[![UnrulyNatives](https://avatars.githubusercontent.com/u/6769986?v=4)](https://github.com/UnrulyNatives "UnrulyNatives (1 commits)")

### Embed Badge

![Health badge](/badges/jkque-laravel-nuxt-ui-starter-kit/health.svg)

```
[![Health](https://phpackages.com/badges/jkque-laravel-nuxt-ui-starter-kit/health.svg)](https://phpackages.com/packages/jkque-laravel-nuxt-ui-starter-kit)
```

###  Alternatives

[laravel/telescope

An elegant debug assistant for the Laravel framework.

5.2k67.8M192](/packages/laravel-telescope)[spiral/roadrunner

RoadRunner: High-performance PHP application server and process manager written in Go and powered with plugins

8.4k12.2M84](/packages/spiral-roadrunner)[nolimits4web/swiper

Most modern mobile touch slider and framework with hardware accelerated transitions

41.8k177.2k1](/packages/nolimits4web-swiper)[laravel/dusk

Laravel Dusk provides simple end-to-end testing and browser automation.

1.9k36.7M259](/packages/laravel-dusk)[laravel/prompts

Add beautiful and user-friendly forms to your command-line applications.

708181.8M596](/packages/laravel-prompts)[cakephp/chronos

A simple API extension for DateTime.

1.4k47.7M121](/packages/cakephp-chronos)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)