Jetstream's Inertia stack is a powerful integration that combines Laravel's backend with Vue.js on the frontend, facilitating the creation of modern single-page applications (SPAs). This stack leverages the Inertia.js library, which enables developers to build dynamic Vue.js applications while using Laravel's routing system instead of Vue router. It bridges the gap between server-side and client-side rendering by allowing Vue components to be rendered directly from the Laravel backend with data passed seamlessly as component props.
One of the core features of Jetstream's Inertia stack is its use of Vue.js as the templating language, providing developers with the flexibility and power of Vue without the complexity often associated with client-side routing. When an application's route is triggered, it responds by rendering an Inertia "page"âa Vue component that looks like a traditional Laravel Blade view from the backend perspective. This approach allows developers to maintain the simplicity of Laravel routing while benefiting from Vue's reactive and component-based UI architecture.
The stack includes a set of pre-built Vue components located in the `resources/js/Components` directory, which are designed to aid in creating a consistent user interface. These components cover UI elements such as buttons, panels, inputs, and modals, and are fully customizable and reusable across the application. Jetstream provides example usages of these components in its own pages, typically found in the `resources/js/Pages` directory, helping developers understand how to implement them in their apps.
Customization is a key aspect of the Inertia stack. Among the tools provided is the `Jetstream::inertia()->whenRendering` method, which lets developers customize or extend the data (props) passed to Jetstream's built-in Vue pages like `Teams/Show` or `Profile/Show`. This method accepts the name of the page and a closure that merges additional data with the default props, which can be defined within the application's `App\Providers\JetstreamServiceProvider` class, allowing easy injection of custom data during the rendering phase.
The stack also includes ready-to-use modal componentsânamely `DialogModal` and `ConfirmationModal`. These modals simplify displaying dialogs in the app, whether for generic purposes or specific actions such as confirming destructive operations like account deletions. The modals' visibility is controlled through Vue's reactive state with the `show` prop, and their content is provided via slots (`title`, `content`, and `footer`), enabling flexible and semantic modal structure.
Another notable integration is the inclusion of Tighten's Ziggy library in Jetstream's Inertia stack. Ziggy acts as a JavaScript counterpart to Laravel's `route()` helper, allowing developers to generate URLs and check current routes within Vue components the same way they would in Laravel Blade templates. This streamlines navigation and routing management within the frontend part of the application and helps keep the frontend and backend routes in sync.
In summary, Jetstream's Inertia stack is designed to provide a full-featured SPA experience by combining the power of Vue.js with Laravel's robust backend, removing the need for separate API endpoints and client-side routing while maintaining a smooth development workflow and consistent UI components. It offers customization flexibility, integrated modal components, and route management with Ziggy, tailored for Vue enthusiasts building modern Laravel applications.