Download the PHP package muradyanvano/laravel-vue-spa-starter-kit without Composer

Laravel Vue SPA Starter Kit

A community Laravel starter kit for a first-party Vue SPA using Vue Router instead of Inertia.js.

This is not an official Laravel starter kit and is not endorsed by Laravel.

Why this starter kit

Stack: Laravel, Vue 3, TypeScript, Vue Router, Fortify, Sanctum, Wayfinder, and Vite.

Architecture choice: a traditional same-origin SPA instead of Inertia.js.

UI and developer experience are inspired by Laravel’s official Vue starter kit; the runtime is a conventional SPA with browser-owned routing.

Quick Start

Laravel Installer

Composer create-project

Pin a specific release when you need an immutable install (for example v1.1.0 or v1.0.0).

Clone / source development

Requirements

• PHP 8.3+
• Composer
• Node.js 22+ (recommended; CI also covers Node 25)
• SQLite (default) or another supported database

The generated project is a normal Laravel application you own and can customize freely.

Features

Authentication

• Login / registration / logout
• Passkey sign-in (WebAuthn; requires a supported browser/platform)
• Password reset
• Email verification
• Password confirmation (password or passkey)
• Two-factor authentication (password login)
• Recovery codes

Passkeys

• Sign in with a passkey from the login page (requires a WebAuthn-capable browser or platform)
• Confirm sensitive actions with a passkey on the confirm-password page
• Manage passkeys under Settings → Security (list, register, remove)
• Fortify and @laravel/passkeys handle WebAuthn ceremonies; Sanctum session cookies remain the SPA auth model
• Password login and password confirmation remain available alongside passkeys

Application

• Responsive sidebar shell and mobile navigation
• Dashboard
• Profile settings (including account deletion)
• Security settings (password update, 2FA, and passkey management)
• Appearance settings (light / dark / system)

Developer experience

• TypeScript
• Laravel Wayfinder
• Axios
• Tailwind CSS + shadcn-vue / Reka UI
• Pest, Vitest, PHPStan, Pint
• Optional Laravel Boost support

Architecture

Laravel owns the API/backend, Fortify endpoints, Sanctum session authentication, and the SPA shell/fallback.

Vue owns browser routing, layouts/pages, authentication state, and API interaction.

Laravel serves the Blade SPA shell for browser routes such as /dashboard and /settings/profile. The catch-all does not swallow /api/*, /sanctum/*, /up, /email/*, /storage/*, Fortify endpoints, or public assets.

Authentication and security

Default design: Laravel and the SPA share one origin (for example https://example.com).

• Sanctum cookie / session authentication (not JWT)
• CSRF protection via /sanctum/csrf-cookie and X-XSRF-TOKEN
• No auth tokens or WebAuthn credentials stored in localStorage
• Session regeneration on authentication events
• Password confirmation for sensitive actions (including passkey registration and removal)
• Email verification
• Two-factor authentication and recovery-code handling
• Passkey metadata API exposes safe fields only (id, name, authenticator, timestamps)

Split-origin deployments need correct SANCTUM_STATEFUL_DOMAINS, session cookie domain/SameSite, CORS, and CSRF configuration. That layout is out of scope for the default kit.

Useful variables: APP_URL, SESSION_DOMAIN, SESSION_SECURE_COOKIE, SANCTUM_STATEFUL_DOMAINS, MAIL_*.

Password reset and email verification use Laravel’s mailer. Configure MAIL_* (or a local driver such as log / Mailpit) before relying on those flows outside tests.

Appearance

Appearance is client-driven (light / dark / system) via localStorage and an appearance cookie, matching the official-kit style settings experience.

Development

From a generated app or a clone of this repository:

Frontend:

Or run php artisan serve and npm run dev in separate terminals.

Testing and quality

CI runs on pushes to main and develop, and on pull requests, including:

• Pest (PHP)
• Vitest (Vue)
• PHPStan
• TypeScript (types:check)
• Formatting / lint (check)
• Laravel Pint
• Production build verification
• Fresh git-archive consumer install checks
• Node.js 22 and 25 matrix coverage

Exact test counts belong in release notes; they change over time.

Wayfinder

These directories are generated and gitignored:

• resources/js/actions
• resources/js/routes
• resources/js/wayfinder

Do not edit or commit them. npm run build / npm run dev generate them via @laravel/vite-plugin-wayfinder. npm run types:check also ensures they exist before vue-tsc runs.

On a completely fresh tree, run composer setup (or at least npm run build / npm run types:check) before expecting TypeScript imports from @/routes / @/actions to resolve.

Laravel Boost

laravel/boost is an optional development dependency for AI-assisted coding.

Boost setup is not mandatory. After creating an app, install Boost guidelines/skills only if you want them:

The Laravel installer may also offer Boost during laravel new. Generated Boost state (boost.json, agent guideline files such as AGENTS.md) is gitignored and is not shipped to Packagist consumers. Composer lifecycle scripts do not run boost:update or boost:install automatically.

Attribution

UI and developer experience inspired by Laravel’s official Vue starter kit.

This community project is independent of Laravel and is not an official starter kit maintained by Laravel. See NOTICE.md for third-party notices.

Links

• GitHub repository
• Packagist package
• Contributing
• Security policy
• License
• Notice
• Laravel documentation
• Vue documentation
• Vue Router documentation

License

MIT — see NOTICE.md.