Inertia JS

Overview Modern web development demands speed without sacrificing architectural integrity. The new Laravel Vue starter kit solves this by providing a pre-configured foundation that includes authentication, profile management, and aesthetic UI layouts. This kit bridges the gap between backend logic and frontend reactivity, allowing you to bypass the repetitive "boilerplate" phase of a new project. Prerequisites To get the most out of this tutorial, you should have a baseline understanding of PHP and JavaScript. Familiarity with the Laravel directory structure and the Vue Composition API is essential, as the kit relies heavily on modern script setup patterns and reactive data binding. Key Libraries & Tools This stack integrates several high-performance tools: - **Laravel**: The robust backend PHP framework. - **Vue**: The frontend framework used for building interactive interfaces. - **Inertia JS**: The "glue" adapter that connects Laravel's server-side routing with Vue's client-side components. - **Shadcn UI (Vue Port)**: A collection of accessible, re-usable UI components built with Tailwind CSS. Code Walkthrough Setting up a new project starts with a single command to generate the application scaffolding. Once initialized, you can manage the layout logic within your Vue components. Layout Switching The kit supports multiple layout configurations out of the box. You can toggle between a sidebar-heavy dashboard or a top-navigation header by adjusting the application layout component. ```javascript // Switching from Sidebar to Header layout import AppHeaderLayout from '@/Layouts/AppHeaderLayout.vue'; // Use this in your page component <AppHeaderLayout> <slot /> </AppHeaderLayout> ``` Integrating Shadcn Components Because the kit uses the Shadcn UI port, adding new elements like a switch or a button is a matter of installing the component and importing it directly into your dashboard. ```javascript // Import a newly installed Shadcn component import { Switch } from '@/Components/ui/switch'; // Implementation in template <Switch :checked="isDark" @update:checked="toggleMode" /> ``` Syntax Notes The kit utilizes Inertia JS to pass data from Laravel controllers directly into Vue props. This eliminates the need for a separate REST or GraphQL API, as the server-side routing handles the state injection. Pay attention to the `useForm` helper from Inertia, which simplifies form submission and validation error handling. Tips & Gotchas Always ensure your development server is running `npm run dev` to compile the Vue assets and Tailwind styles in real-time. If you enable the `mustVerifyEmail` feature in your model, the starter kit automatically blocks access to the dashboard until the user confirms their link, ensuring security remains a default setting rather than an afterthought.