Weave Code
Svelte Starter Kit Laravel Package
laravel/svelte-starter-kit
Modern Laravel starter kit with a Svelte 5 + TypeScript frontend powered by Inertia. Includes Tailwind, shadcn-svelte, and bits-ui for UI, plus fast Vite builds. Ideal for building SPA-like apps with classic Laravel routing and controllers.
Frequently asked questions about Svelte Starter Kit
- How do I install the Laravel Svelte Starter Kit?
- Run `composer create-project laravel/laravel-svelte-starter-kit` in your terminal. This clones the official repo with pre-configured Laravel 10+, Svelte 5, Vite, and shadcn-svelte. No manual setup is needed beyond running `npm install` and `npm run dev`.
- Does this starter kit support Laravel 11 or newer?
- The kit is officially maintained for Laravel 10+ and is designed to work with future versions. Laravel’s Inertia.js integration ensures compatibility, but always check the [Laravel docs](https://laravel.com/docs/starter-kits) for updates before upgrading.
- Can I use this with existing Laravel projects?
- Yes, but you’ll need to manually migrate your Blade views to Svelte components and update routes/controllers to use Inertia.js. The starter kit provides a clean slate, so incremental adoption requires careful planning for shared logic (e.g., middleware, auth).
- What’s the difference between this and Laravel + Vue/React starters?
- This kit replaces Vue/React with Svelte’s compiler-driven reactivity, reducing boilerplate and improving performance. Inertia.js handles server-side routing identically, but Svelte’s scoped CSS and simpler syntax may appeal to teams prioritizing developer experience over framework familiarity.
- How do I handle form validation with Svelte + Laravel?
- Use Laravel’s built-in validation (e.g., `$request->validate()`) and pass errors to Svelte via Inertia’s page props. The starter kit includes pre-configured validation helpers in `app/Http/Controllers` and example forms in `resources/js/Pages`.
- Is shadcn-svelte mandatory? Can I use other UI libraries?
- shadcn-svelte is pre-installed for consistency, but you can remove or replace components. The kit supports any Svelte-compatible library (e.g., SvelteKit, DaisyUI). Delete `shadcn` dependencies in `package.json` and rebuild Vite if needed.
- How do I deploy this to production?
- Run `npm run build` to generate optimized assets in `public/build`, then deploy as you would a standard Laravel app. Ensure your server supports Vite’s static assets and Laravel’s PHP routes. Use `php artisan optimize` for further performance gains.
- Will this work with Livewire or Alpine.js?
- Yes, but use them judiciously. Livewire’s server-side reactivity conflicts with Svelte’s client-side state management. Prefer Svelte stores (e.g., Pinia) for complex state, reserving Livewire for edge cases like real-time updates where Svelte’s reactivity isn’t sufficient.
- How do I add global state management (e.g., Pinia)?
- Install Pinia via `npm install @pinia/svelte` and configure it in `resources/js/app.js`. The starter kit doesn’t include Pinia by default, but its Vite setup supports it. Follow the [Pinia Svelte docs](https://pinia.svelte.dev/) for integration with Inertia pages.
- What’s the best way to debug Svelte + Laravel issues?
- Use Chrome DevTools for frontend errors and Laravel’s `php artisan tinker` for backend issues. Enable Vite’s source maps (`vite.config.js`) and check Inertia’s network tab for API/prop mismatches. Logs from `resources/js/Pages` and `app/Http/Controllers` are synchronized via Inertia.
Weaver
How can I help you explore Laravel packages today?