Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

Inertia and SPA Techniques

So you've mastered the basics of building an SPA with Laravel and Inertia? Nice work, but of course there's always more to learn. In this series, we'll review a variety of useful tips and techniques to simplify and clean up your single page applications. This includes everything from creating webpack aliases, to wrapping third party APIs, to leveraging Laravel's API resources. So what do you think? Ready to get started?

Progress

Series Info

Episodes
9
Run Time
1h 28m
Difficulty
Advanced
Last Updated
Mar 3, 2022
Version
Latest
Play Series

Series Episodes

  1. Quick Webpack Wins (2)

    1. Import Aliases

      Let's ease into this series with something small and simple, but still quite useful. We'll leverage webpack aliases to make for cleaner JavaScript imports.

    2. Code Splitting Strategies

      While we're still on the subject of webpack, let's take a few moments to discuss some code-splitting strategies that you might consider - particularly when building medium-to-large applications.
  2. Serialization (2)

    1. Serialization Security Concerns

      Let's next move on to some potential security concerns that you might run into when converting a large server-side application to an SPA. You can of course no longer blindly pass an Eloquent model or collection to the client. Instead, it's vital that you be conscientious about every attribute you pass. Let's review a few options you might consider.

    2. Consider API Resources

      Next up, we can move on to API resources, which I leverage heavily in my own projects. Think of an API resource as a transformer class that converts an Eloquent model instance into its respective JSON representation. While models can do this automatically, resource classes provide a greater level of configurability.
  3. Code Organization (4)

    1. Wrap it in a Module

      Let's now move on to some suggestions and guidelines for how to structure and organize your code. In this episode, we'll learn how to extract initialization and configuration code for a third-party syntax highlighting library into a module with a smaller surface area.

    2. Wrap it in a Component

      The small syntax highlighting service we created in the previous episode is useful, but it still requires one too many steps to initialize. To fix this, let's create a dedicated Highlight Vue component and tuck those initialization steps away from view.

    3. Make it a Composable

      In this episode, we'll review another technique for organizing your code: Vue composables. You can think of composables as Vue 3's version of mixins - but on steroids. To illustrate this, let's add support for interacting with the Clipboard API.

    4. Make a Client-Side Model

      When building server-side applications, it's easy to open any Eloquent model and extend it with new behavior or affordances. The same, of course, is true on the client-side. You are not limited to basic scalars. When and if it makes sense, there's nothing keeping you from wrapping, for example, a set of user attributes in a dedicated class. Let's review how in this episode.
  4. Further Techniques (1)

    1. Options for Reducing Inertia Payloads

      Let's return to API resources and discuss situations where you may need to return a reduced payload to Inertia. It seems wasteful to return a full API resource if a particular view only requires a handful of its attributes. In this episode, I'll show you two options that you might consider for your own projects.

Continue Learning

Blaze Deep-Dive thumbnail

Blaze Deep-Dive

With Caleb Porzio

Blade components are slow. Really slow. At scale, they quietly become the biggest bottleneck in your Laravel application. We discovered this while trying to make Flux as fast as possible, and the result is Blaze: a package that fundamentally rethinks how Blade components are compiled and rendered. With multiple levels of optimization, Blaze can shave hundreds of milliseconds off a page load, making Blade rendering up to 25x faster in some cases.In this series, we'll install it, benchmark it, build a toy version from scratch so you truly understand how it works, and then master every directive and edge case so you can squeeze maximum performance out of your own apps.

  • 20 Episodes
Customizing Filament For User-Facing Apps thumbnail

Customizing Filament For User-Facing Apps

With Shruti Balasa

In this series, we'll build a real, user-facing app called Booknest using Laravel and Filament. We'll begin with a fresh install and begin pushing Filament beyond the usual "internal admin only" setup that you typically see. It's capable of so much more.

  • 14 Episodes
Filament 5 in Depth thumbnail

Filament 5 in Depth

With Kevin McKee

Filament's powers have increased exponentially. Now at version 5, it's more powerful and capable than ever. In this series, we'll build a practical Roadmap app from scratch, using Filament for the admin panel and Livewire for the public-facing side.Along the way, we'll cover panel configuration, enum-driven UI, strict authorization with policies, and newer form inputs like ToggleButtons, Sliders, and the TipTap-powered RichEditor. By the end, you'll have a full-featured app and a solid handle on everything new in Filament.

  • 16 Episodes
Build Native Apps With PHP thumbnail

Build Native Apps With PHP

With Simon Hamp

Welcome to my CreatorSeries! I’m Simon, and in this series we’re going to learn about NativePHP and use it to build true native applications for desktop and mobile. We're not talking about web apps accessed through the browser. Your users will be able to install directly on their devices. This is a big leap forward for the PHP ecosystem, and while it’s a real paradigm shift from the way we normally build with PHP and Laravel, we’ve worked hard to keep it familiar and approachable. So grab a warm drink, get comfortable, and let's start building!

  • 17 Episodes
Everything New in Livewire 4 thumbnail

Everything New in Livewire 4

With Caleb Porzio

Livewire 4 is a major release, and it's packed with features you're going to love. View-based components keep your PHP and Blade together in one file. Islands let you create isolated, independently-updating regions without the overhead of nested components. New directives like wire:sort tackle big things with minimal code. And a powerful JavaScript interceptor system gives you fine-grained control over every request.Whether you're upgrading an existing app or starting fresh, this series will walk you through everything new, from the fundamentals to the advanced stuff. Let's dig in.

  • 25 Episodes