mark1502/daisy-vue-starter-kit

daisy-vue-starter-kit

A Laravel 13 starter kit with Inertia.js v3, Vue 3, Tailwind 4, daisyUI 5, Ziggy, and Fortify-based authentication. Breeze-inspired posture (plain Vue, minimal abstraction) with daisyUI components instead of hand-rolled Tailwind markup. It's a lightweight kit using Ziggy rather than Wayfinder and daisyUI for the ui, including theme support.

What's included

• Laravel 13 + Inertia.js v3 (SSR off by default)
• Vue 3 with plain JavaScript (no TypeScript)
• Tailwind CSS 4 + daisyUI 5 with ~16 ready-to-use themes and a navbar theme picker
• Ziggy for route() in Vue components
• Laravel Fortify for authentication (headless — every view is an Inertia page)
• lucide/vue for icons
• Auth pages: login, register, forgot/reset password, email verification, password confirmation
• Authenticated layout with navbar + theme picker, dashboard, settings (profile, password, delete account)

Two-factor authentication is wired into the User model and migrations but disabled by default — flip the feature on in config/fortify.php to enable it.

Requirements

• PHP 8.5+ with the zip extension (required by Laravel Dusk, a dev dependency)
• Node.js 22+
• Composer 2

Installation

laravel new my-app --using=mark1502/daisy-vue-starter-kit
cd my-app
composer dev

composer dev (or php artisan dev) runs the PHP server, queue listener, and Vite dev server together. On macOS and Linux it uses the @laravel/multiplex tabbed TUI; on Windows, Laravel falls back to concurrently with prefixed, interleaved output.

Or use composer directly:

composer create-project mark1502/daisy-vue-starter-kit my-app
cd my-app
composer dev

Project layout

• resources/js/Pages/Auth/ — Fortify-backed auth pages
• resources/js/Pages/Settings/ — profile, password, delete-account
• resources/js/Components/ — GuestLayout, AuthenticatedLayout, ThemePicker, GuestThemeToggle, form helpers
• resources/js/Composables/useTheme.js — theme state and persistence
• resources/css/app.css — Tailwind 4 entry plus daisyUI theme definitions
• app/Providers/FortifyServiceProvider.php — binds every Fortify view to an Inertia render call

Themes

Theme choice persists to localStorage under the key theme (authenticated areas) and guestTheme (guest/auth pages, light/dark only). The initial paint is set inline in app.blade.php to avoid FOUC.

Navigation

The main nav bar is driven by a single config file — resources/js/navigation.js. Add a link there and it appears in both the desktop bar and the mobile hamburger dropdown (one array, no duplicated markup).

Adding a link

Add one row to navItems:

export const navItems = [
    { label: 'Dashboard', route: 'dashboard' },
    { label: 'Projects', route: 'projects.index' },
]

Active-link highlighting is pattern-based by default, with an optional server-driven activeNav page-prop override for cases where one route serves multiple nav sections.

Full options and details

For all the details about adding links to the navbar and every available option — refer to the Navbar and Links documentation: docs/md_files/7. Navbar and Links.md (also available as a collapsible HTML page at docs/html_files/navbar_and_links.html).

Logo

The Flower icon (left of the bar) is a placeholder brand/home link. Swap it for your own logo in AuthenticatedLayout.vue — it's marked with a comment.

Documentation

Documentation about the auth system (fortify) and the starter kit is located in the docs folder. The documentation is supplemental to the official Fortify documentation and is available in markdown format and also html with collapsable sections.

Testing

Feature tests (PHPUnit) cover every enabled Fortify flow and the settings pages:

composer test

Browser tests use Laravel Dusk and live in tests/Browser. One-time setup:

cp .env.dusk.example .env.dusk.local
php artisan key:generate --env=dusk.local
touch database/dusk.sqlite
php artisan dusk:chrome-driver --detect
npm run build

Then start a server on the URL from .env.dusk.local and run the suite:

php artisan serve --host=127.0.0.1 --port=8010   # in a separate terminal
php artisan dusk

Dusk swaps .env.dusk.local in for .env while it runs, so the browser tests use their own SQLite database.

Customization

This is a starter kit, not a framework. Edit the Vue pages directly.

License

MIT