Breeze

Overview Laravel has fundamentally shifted how developers kickstart projects by replacing traditional packages like Breeze and Jetstream with dedicated application starter kits. The Vue Starter Kit represents a modern bridge between Laravel 12 and the reactive frontend power of Vue 3. Unlike previous versions that felt like external dependencies, these kits are now complete, ready-to-go applications. You own the code from the second you install it, allowing for deep customization without fighting against a vendor-locked library. Prerequisites To follow along, you should have a solid grasp of PHP and JavaScript. Familiarity with the Laravel framework's routing and MVC architecture is essential. On the frontend, you should understand Vue 3's Composition API and Tailwind CSS. You will also need Composer and Node.js installed on your local environment. Key Libraries & Tools * **Inertia.js**: The "glue" that connects Laravel's server-side routing with Vue's client-side reactivity. * **Shadcn Vue**: A port of the popular Shadcn UI library, providing accessible and customizable Vue components. * **Pest**: A elegant PHP testing framework included by default for robust backend verification. * **Vite**: The lightning-fast build tool used for frontend asset compilation. * **SQLite**: The default database configuration for rapid local prototyping. Code Walkthrough Installing the kit is most efficient using the Laravel Installer. Execute the following command to start a new project: ```bash laravel new my-vue-app ``` Once installed, you can modify the application layout dynamically. Navigate to `resources/js/layouts/AppLayout.vue`. The kit provides built-in flexibility to switch between a sidebar or a header-based navigation by simply changing the imported component. For example, to adjust the sidebar behavior, you can modify the `Sidebar` component props: ```vue <app-sidebar collapsible="icon" variant="inset" /> ``` Changing `collapsible` to `off-canvas` or `none` and `variant` to `floating` allows you to reshape the entire dashboard UX in seconds. Authentication logic is found in `routes/web.php` and `routes/auth.php`, utilizing Inertia to render Vue components directly from your controllers. Syntax Notes The kit utilizes the **MustVerifyEmail** contract to gate access to the dashboard. By simply adding this interface to your `User` model, the Laravel backend handles the redirection logic automatically. Furthermore, the use of **Inertia::render()** in your routes ensures that data is passed to your Vue templates as props, eliminating the need for a separate REST or GraphQL API. Practical Examples Beyond standard CRUD, this kit is perfect for building SaaS dashboards. You can easily integrate new UI elements from Shadcn Vue. For instance, if you want to add a toggle for email notifications, you can install the Switch component and drop it into your `Dashboard.vue` file. This modularity ensures your application grows with your business requirements rather than being limited by the starter kit's original scope. Tips & Gotchas Currently, the Vue Starter Kit uses Tailwind 3, whereas the React and Livewire kits have moved to Tailwind 4. This is due to Shadcn Vue currently requiring Tailwind 3 for its styling conventions. When adding new components, always ensure you check if they exist in your local `components/ui` directory to avoid overwriting custom changes during manual updates.