Weave Code
Blank Vue Starter Kit Laravel Package
laravel/blank-vue-starter-kit
Laravel + Vue starter kit for Inertia apps: classic Laravel routing/controllers with a modern Vue SPA frontend. Includes Vue, TypeScript, Tailwind, and Vite setup, but no auth scaffolding—start building your own UI fast.
At a glance
Frequently asked questions about Blank Vue Starter Kit
- How do I create a new Laravel project with Vue using this starter kit?
- Run `composer create-project laravel/blank-vue-starter-kit project-name` to scaffold a fresh Laravel app with Vue 3, TypeScript, and Tailwind preconfigured. No additional setup is needed beyond Laravel’s standard installation steps.
- Does this starter kit support Laravel 10+ and PHP 8.1+?
- Yes, the starter kit is fully compatible with Laravel 10+ and PHP 8.1+. It leverages modern tooling like Vite and TypeScript, which require these versions for optimal performance and features.
- Can I use this with Laravel Sanctum or Jetstream for authentication?
- The starter kit doesn’t include auth scaffolding, but you can integrate Sanctum (token-based) or Jetstream (full-stack) manually. Sanctum works seamlessly with Inertia.js, while Jetstream requires minor adjustments for Vue routes.
- What’s the difference between this and a traditional REST API + Vue setup?
- This starter kit uses Inertia.js to share Laravel’s server-side routing and controllers with Vue, avoiding the need for a separate API layer. It’s ideal for teams wanting to keep backend logic in Laravel while using Vue for the frontend.
- Will this work if I already have a Laravel app with Blade templates?
- Yes, you can gradually migrate Blade routes to Vue pages. The starter kit provides a hybrid approach—existing Blade routes remain functional, while new features can use Vue components via Inertia.js.
- Does this support server-side rendering (SSR) for SEO?
- Inertia.js supports SSR via its Laravel SSR plugin, but it’s not enabled by default. Enable it in `inertia.config.js` and configure Vite for SSR if you need dynamic meta tags or better SEO performance.
- Can I replace Tailwind CSS with another framework like Bootstrap?
- Yes, Tailwind is optional. Remove Tailwind-related files (e.g., `tailwind.config.js`, `@tailwind` directives) and install your preferred CSS framework. The starter kit’s Vue components are framework-agnostic.
- How do I handle form submissions and validation with Vue?
- Use Inertia’s built-in form handling with Laravel’s validation. Submit forms via `useForm()` from `@inertiajs/vue3`, and Laravel’s validation rules (e.g., in controllers) will automatically populate Vue error messages.
- Are there any known conflicts with Livewire or Alpine.js?
- No direct conflicts, but route isolation is recommended. For example, use `/livewire/*` for Livewire and `/vue/*` for Inertia routes to avoid mixing frontend technologies on the same page.
- How do I test this starter kit before production deployment?
- Test locally with `npm run dev` for development builds or `npm run build` for production. Use Laravel’s built-in testing tools (e.g., Pest or PHPUnit) for backend logic and Vue Test Utils for frontend components. Inertia.js also supports testing with Laravel’s HTTP tests.
Weaver
How can I help you explore Laravel packages today?