imsus/laravel-inertia-vue-starter-kit

A Laravel starter kit with Inertia.js, Vue 3, and Vite+.

2 1

laravel vue spa inertia vite starter-kit

Install
`composer require imsus/laravel-inertia-vue-starter-kit`
PHP:	^8.3

Maintainer: imsus

Laravel Inertia Vue Starter Kit

A modern Laravel starter kit with Inertia, Vue 3, and an enhanced developer experience inspired by Nuxt.

Tech Stack

PHP 8.4+ with Laravel 13
Runtime: Vite+ (pnpm wrapper)
Frontend: Vue 3 with Inertia v3
Styling: Tailwind CSS 4
State Management: VueUse
Icons: Lucide + Phosphor (auto-imported)
Linting/Formatting: Vite+ (oxlint + oxfmt)
Type Safety: TypeScript + Wayfinder

Features

Nuxt-like Developer Experience

This starter kit brings Nuxt-like conveniences to Vue development:

Feature	Description
Auto-import Composables	Functions in `resources/js/composables/` are auto-imported
Auto-load Components	Components in `resources/js/components/` are auto-registered
Auto-load Icons	Any icon from Lucide/Phosphor is available as `<IconName />`
Type-safe Routes	Wayfinder generates TypeScript functions from Laravel controllers

Code Examples

Composables (auto-imported)

<script setup>
// useTheme() is auto-imported from resources/js/composables/
const { isDark, toggleDark } = useTheme();
const toggleDark = useToggle(isDark);
</script>

Components (auto-registered)

<template>
  <!-- DarkModeToggle.vue is auto-registered -->
  <DarkModeToggle />
</template>

Icons (auto-imported)

<template>
  <IconHome />
  <IconSettings />
  <IconUser />
</template>

Wayfinder Routes (type-safe)

import { show } from "@/actions/App/Http/Controllers/PostController";

// Type-safe routing
const post = show(1); // { url: "/posts/1", method: "get" }

Getting Started

Prerequisites

PHP 8.4+
Vite+ (run npm install -g vite-plus)
Composer

Installation

# Install PHP dependencies
composer install

# Install JavaScript dependencies
vp install

# Start development servers
vp dev

Available Commands

Command	Description
`vp dev`	Start Vite dev server
`vp build`	Build for production
`vp build:ssr`	Build for SSR
`vp fmt`	Format JS/TS/Vue
`vp lint`	Lint JS/TS/Vue
`vp check`	Format, lint & type check
`composer lint`	Lint PHP (mago)
`composer format`	Format PHP (mago)
`php artisan test`	Run Pest tests

Project Structure

/
├── app/                    # Laravel application
│   ├── Http/Controllers/   # Controllers (auto-discovered by Wayfinder)
│   ├── Models/             # Eloquent models
│   └── Providers/          # Service providers
├── bootstrap/              # Laravel bootstrap files
├── config/                 # Configuration files
├── database/               # Migrations, factories, seeders
├── resources/
│   └── js/
│       ├── app.ts          # Inertia app entry
│       ├── ssr.ts          # SSR entry point
│       ├── components/     # Auto-registered Vue components
│       ├── composables/    # Auto-imported Vue composables
│       ├── lib/            # Utility libraries
│       └── pages/          # Inertia pages
├── routes/                 # Route definitions
├── storage/                # Storage files
├── tests/                  # Pest tests
├── vite.config.ts          # Vite configuration
├── tsconfig.json           # TypeScript configuration
└── mago.toml               # Mago configuration

Configuration Files

File	Purpose
`vite.config.ts`	Vite plugins (AutoImport, Components, Icons, Wayfinder)
`tsconfig.json`	TypeScript configuration with paths alias
`mago.toml`	Mago PHP linter/formatter rules
`boost.json`	Laravel Boost MCP configuration

Icon Sets

This starter kit includes two icon sets:

Lucide (@iconify-json/lucide) - Clean, modern icons
Phosphor (@iconify-json/ph) - Versatile icon family

Usage: <Icon[Name] /> where Name is the icon identifier in kebab-case.