Laravel 11 with Inertia.js and Vue 3 | A Practical Guide

Create a global notifications plugin to display flash messages by hooking into Inertia's router and triggering toasts when page props message exists.

Streamline the flash notifications flow in a Laravel 11 Inertia.js Vue 3 app by formatting session data in middleware for front-end consumption.

Fix a small but important bug in the flash notifications flow by updating notifications.js to require message.body before displaying a default info notification during validation.

Customize Laravel error pages in the Inertia.js stack by creating a blade file for the error (e.g., 403.blade.php) to override the default page, and prepare for Inertia responses.

Override the default error responses in Laravel 11 by returning inertia responses for errors, such as 419 and 403, wiring an inertia-rendered error page and ensuring assets compile.

Render errors on a Vue error page by checking status codes in an array and passing a status prop to compute titles and descriptions for 403 and 404 in Laravel.

Define a config toggle to show or hide custom error pages in a Laravel 11 app with Inertia.js. Enable in production, disable in local environments.

Build a Laravel 11 student management system with Inertia.js and Vue 3, implementing create, read, update, delete operations, dependent dropdowns with axios, search, class filtering, and server-side pagination.

Set up a fresh Laravel project with Inertia and Vue using the Laravel Breeze Starter Kit, configure SQLite, and run php artisan migrate to create the database and admin user.

Explore building a Laravel 11 app by defining models, migrations, factories, and seeders, establishing class, section, and student relationships, and seeding an admin user to bootstrap data.

Display and format the students data in a Laravel 11 app using Inertia.js and Vue 3, with API resources, eager loading, and front-end props to render a searchable table.

Implement server-side pagination with Inertia.js and Vue 3 in a Laravel 11 app, building a pagination component, fetching data from the server, and rendering paginated links with tailwind styling.

Explore the record creation flow in a Laravel 11 app with Inertia.js and Vue 3, rendering the create page, passing class data, and preparing for dependent dropdowns and validation.

Implement dependent dropdowns with Vue watchers that fetch sections from the API when the class ID changes and populate the section select in an Inertia v3 form.

Display validation messages and finalize the record creation flow in a Laravel 11 Inertia.js Vue 3 app, reusing Breeze-inspired validation and binding error states for name, email, class, and section.

Learn the record update flow in a Laravel 11 app with Inertia.js and Vue 3, covering backend edit and update methods, route model binding, and a prefilled edit form.

Implement a live search with Vue 3 and Inertia.js on Laravel 11, binding input to a ref, building a search url, and filtering and paginating results on the backend.

Fix the issue where the search input is lost when navigating pagination by moving the update page number logic to the index view and passing it as a prop.

Fix remaining issues in a data table by resetting the page to one when a search is entered. Verify by updating url, preserving scroll, and building with npm run dev.

Implement a filter by class for the students data table using a class select and v-model. The backend combines search and class filtering in Laravel to return the correct results.

Implement roles and permissions in an inertia based Laravel app by defining role CRUD, assigning permissions, and enforcing front-end and back-end checks from scratch, with admin and user role examples.

Explore the database structure for roles and permissions and users in a Laravel 11 app. Understand the many-to-many relationships and pivot tables, then plan migrations, factories, and seeders.

Define the role and permission models and migrations, create role_user and permission_role pivot tables, and seed admin and user roles with permissions for student access in a Laravel 11 app.

Explore displaying and deleting roles in a Laravel 11 app using Inertia.js and Vue 3, including the role resource, index view, and destroy route with route model binding.

Explore the create, update, and delete flows for roles in an Inertia-based Laravel 11 app, including validation, redirects to the roles index, and upcoming permission management.

Implement a permissions drop-down on the role create page using the view select package, enabling multi-select, data passing from backend, and syncing selected permission IDs with the role.

Explore how to edit role permissions in Laravel 11 with Inertia.js and Vue 3 by eager loading permissions, rendering a multi-select dropdown, and syncing selected permissions on update.

Define gates in Laravel 11 from the authenticated admin's roles and permissions, register them in a web middleware for every request, and control access based on those permissions.

Implement backend authorization checks in Laravel 11 using gates and the gate facade, handling null users and applying student access, create, edit, and delete permissions.

Implement frontend authorization by sharing backend permissions via the inertia middleware and can props. Hide or show UI elements based on user roles and permissions.

Build a multiple drag and drop uploader using Laravel Inertia JS v3 and Tailwind CSS, chunk uploads, encode with queues, and broadcast progress to the front end.

Install and set up a fresh Laravel project with the Inertia view stack and Breeze, configure SQLite, run migrations, and register an admin to start the uploader component.

Define the video model and migration to store user id, title, description, path, filename, and encoded status with cascade delete, and implement an uploader component with drag-and-drop and encoding indicators.

Build the uploader component by wiring a file input to open the file dialog, handle multiple files, and store them in a reactive uploads object for UI display.

Define a separate upload item component to render each uploaded file and pass the upload object via props, offloading UI and logic from the uploader.

Create and store a video record by uploading a file, saving its data to the uploads object and database, and wiring routes and a video controller for the store action.

Update the upload details by storing the video and editing title and description via a text area, using a form posted to videos.update with validation and preserving scroll and state.

Fix and finalize the video details update flow in Laravel, correct the spelling issues affecting route and model binding, implement validations with input error components, and prepare for video chunking.

Learn chunked video uploads in a Laravel and Vue 3 app using mux up chunk. And display a progress indicator as chunks upload to videos.upload while the backend assembles them.

Implement a live upload progress indicator by listening to progress events, updating an upload object's progress and uploading flags, and dynamically rendering a progress bar in the UI.

Handle video chunk uploads on the server by receiving chunked data through videos.upload, reconstructing the file with the Laravel chunk upload package, updating the video path, and storing publicly.

Enable canceling uploads by showing a cancel button when uploading, emit a cancel event with the video ID, abort the front-end upload, and delete the video via the destroy method.

Learn to pause and resume uploads on the front end by emitting pause and resume events, handling upload by id, and toggling user interface buttons by paused state.

Implement strict authorization for video management in Laravel 11 by using policies and form requests to ensure only the owner can update, delete, or upload a video.

Learn to implement a drag-and-drop uploader in a Laravel 11 app with Inertia.js and Vue 3, wiring drop events to the existing chunked upload flow and progress indicators.

Install and configure Laravel Reverb to display backend encoding progress, publish broadcasting settings, integrate Laravel Echo and Pusher JS, and test with a sample test event on the videos channel.

Define a private broadcasting encoding job that starts video encoding, emit a video encoding started event, and notify the owner via a private channel, updating the front end.

Learn to encode videos in a Laravel app using the Laravel FFmpeg package, configure FFmpeg binaries, and store the encoded mp4 files on the public disk.

Broadcast video encoding progress from the back end and display the percentage on the front end via a video encoding progress event on a private users channel.

Finalize uploader flow by replacing old video with encoded one in video model and deleting previous file after encoding, then emit after-saving event to update front end.

Fix a bug in the multi drag and drop uploader by correcting after saving chaining, restore auto completion, and ensure encoding completes with the updated path and encoded flag.

Implement smooth infinite scrolling in Inertia.js based apps using Vue.js, loading initial ten records and fetching more data on scroll, addressing router issues and performance.

Install a fresh Laravel project with the Laravel installer, Breeze with Vue and Inertia, and SQLite; then define a Post model with a factory and seeder for infinite scrolling.

Create a post model with its migration, factory, and seeder, seed 100 posts with varied created_at dates to enable infinite scrolling in a Laravel 11 app.

Define a new post route and controller, paginate ten posts, and render with Inertia using a post resource to display id, title, and teaser, setting up infinite scrolling.

Use the intersection observer from a Vue.js utility package to detect when the bottom enters the viewport and trigger loading more data, enabling infinite scrolling with a last element ref.

Implement infinite scrolling with inertia router using the intersection observer to load more posts, manage pagination (current and next pages), and address limitations before switching to axios.

Implement infinite scrolling with Axios in a Laravel 11 app, replacing inertia router, handle json post data via use page and props, and manage pagination.

Finalize the infinite scrolling feature by implementing cursor pagination with a next cursor and fixing duplicate data loads at the bottom via the intersection observer.

Fix remaining issues in infinite scrolling for an inertia-based app by using an intersection observer and next cursor checks to stop loading at the end of pagination.

Learn to implement translations in an inertia-based Laravel 11 app with a language dropdown to set the locale and apply translations project-wide; see a German example to improve performance.

Install a fresh Laravel project with the Laravel installer, pick Breeze with Vue and Inertia, use SQLite for local development, and initialize a Git repository.

Define a PHP enum Lang in app/lang to store English and German, add a label method, publish Laravel language files, and verify labels with a Pest unit test.

Share translation data globally via inertia middleware to render a navigation dropdown across all pages, exposing languages with value and label using a language resource.

Build a language selector with a dropdown to switch translations on a Laravel 11 app using Inertia.js and Vue 3, leveraging an enum and Inertia middleware.

Store the user's selected language from the dropdown in the session to persist translations across visits, validating with an enum and falling back to the default locale.

Create a language middleware to read the session language and set the app locale for every request in Laravel 11 with inertia.js.

Learn to share locale translations from Laravel to the Inertia front end by using the Inertia request middleware to load language files, prefix keys by file, and serve selected language.

Learn to replace translation placeholders with dynamic content using a globally registered JavaScript helper, accessing translations via use page props and performing replacements such as the user name.

Enhance performance by caching translations with the catch helper, using a unique key like translations.{locale} to serve English or German data from the cache.

Upgrade inertia from 1 to 2.0 and explore polling, prefetching, and deferred props to boost performance, then implement infinite scrolling and lazy loading in Laravel 11 Inertia Vue 3 app.

Explore polling in Inertia.js with the usePoll helper, fetching latest data at intervals, loading only required data, and controlling start, stop, and lifecycle events for real-time updates.

Inertia 2.0 deferred props enable skeleton rendering and post-load fetch, boosting perceived performance; implement with inertia defer on the server and a client deferred wrapper, plus grouping for parallel loading.

Master prop merging in Laravel 11 with Inertia.js and Vue 3 by using the Inertia merge function to combine server data with client data, demonstrated with a notification system.

Practice secure navigation by enabling the history encryption API in Inertia 2.0, which encrypts page history with the browser crypto API and clears it on logout to prevent back-button access.

Learn how Inertia 2.0 makes partial reloads asynchronous and parallel, replacing the old synchronous behavior. See a two-button demo showing normal vs delayed reloads to illustrate concurrent processing.

Learn how Inertia version 2.0 prefetching preloads data for pages users are likely to visit, using link and programmatic prefetching, cache strategies, and stale-while-revalidate.