Weave Code
Vue Starter Kit Laravel Package
laravel/vue-starter-kit
Modern Laravel + Vue 3 starter kit powered by Inertia for SPA-like apps with server-side routing. Includes TypeScript, Tailwind CSS, Vite, Composition API, and shadcn-vue components—ideal for quickly bootstrapping a full-stack Laravel app.
At a glance
Frequently asked questions about Vue Starter Kit
- What Laravel versions does the Vue Starter Kit support?
- The Laravel + Vue Starter Kit is designed for Laravel 10.x and 11.x. It leverages modern Laravel features like Eloquent, Blade integration, and Inertia.js, which are fully compatible with these versions. Always check the package’s release notes for specific version requirements, as minor updates may align with new Laravel releases.
- How do I install this starter kit in an existing Laravel project?
- Use Composer to install the package: `composer require laravel/vue-starter-kit`. Then follow the setup instructions in the [official Laravel documentation](https://laravel.com/docs/starter-kits) to configure Vite, Inertia, and TypeScript. The kit replaces Laravel Mix with Vite by default, so ensure your `vite.config.js` and `resources/js/app.ts` are properly linked to your Laravel routes.
- Can I use this starter kit with Vue 2 instead of Vue 3?
- No, this starter kit is explicitly built for Vue 3 with the Composition API. Vue 2 support is not provided, as Vue 3 is the future of Vue.js and offers significant performance and feature improvements. If you’re maintaining a Vue 2 project, consider alternatives like Laravel’s older Vue mix setup or third-party Vue 2 + Inertia integrations.
- How does Inertia.js improve performance compared to traditional Laravel + Vue setups?
- Inertia.js eliminates the need for manual API calls by letting you use Laravel’s server-side routing and controllers directly from Vue components. This reduces latency and simplifies state management, as data flows seamlessly between the backend and frontend. Vite’s fast HMR (Hot Module Replacement) further speeds up development, making iteration nearly instant.
- Is TypeScript support mandatory, or can I use plain JavaScript?
- TypeScript is included out of the box for type safety and modern development, but you can opt out by renaming `.ts` files to `.js` and adjusting your `tsconfig.json`. However, the starter kit’s shadcn-vue components and Inertia integration rely heavily on TypeScript, so disabling it may require additional configuration or lose some features like autocompletion and prop validation.
- How do I customize the shadcn-vue components to match my brand?
- shadcn-vue components are built with Tailwind CSS, so you can customize them by modifying your `tailwind.config.js` or overriding their default styles in your global CSS. For deeper customization, use shadcn’s CLI to generate new components or extend existing ones. The kit includes a `components/` directory where you can place your own variants or wrappers around shadcn components.
- Will this starter kit work with Laravel Sanctum or Passport for authentication?
- Yes, the starter kit is fully compatible with Laravel Sanctum and Passport. Inertia.js integrates seamlessly with Laravel’s auth system, so you can use Sanctum for API-based auth or Passport for OAuth. The shadcn-vue components include pre-built auth UI (e.g., login, registration forms), which you can customize or replace as needed. Just ensure your auth routes are properly configured in `routes/web.php`.
- Can I deploy this to production without additional configuration?
- The starter kit is production-ready with Vite’s optimized builds, but you’ll need to run `npm run build` (or `vite build`) before deployment to generate minified assets. Ensure your Laravel `mix-manifest.json` is correctly referenced in your Blade layouts. For SEO-critical pages, consider server-side rendering (SSR) with Inertia’s Laravel backend or a separate SSR setup like Nuxt.js, though this requires extra configuration.
- What are the alternatives to this starter kit for Laravel + Vue development?
- Alternatives include Laravel’s older `laravel-vue-boilerplate` (Vue 2-focused), Jetstream with Inertia (for auth-heavy apps), or custom setups using Vue CLI or Vite directly. For full-stack frameworks, consider Livewire (for Blade-heavy apps) or Next.js (for SSR/SSG). If you need a more decoupled approach, Laravel’s API + separate Vue/Vite frontend is another option, though it requires manual API management.
- How do I test Vue components that use Inertia.js in Laravel?
- Test Vue components with Inertia by mocking `$page` props in your tests. Use `@inertiajs/vue3`’s testing utilities or Jest/Vitest to simulate server responses. For Laravel backend tests, use PHPUnit to verify controller logic that feeds data to Inertia. Example: mock `$page.props` in a component test to simulate a successful page load. The starter kit’s TypeScript setup also supports testing with `vitest` or `jest` for frontend assertions.
Weaver
How can I help you explore Laravel packages today?