Pascal Baljet
@pascalbaljet.bsky.social
Husband of Esmée, dad of Loïs and Kate ❤️
Works at @laravel.com. Open-source enthusiast. Also builds inertiaui.com.
https://pinkary.com/@pascalbaljet
From the other side...
Very cool! The web version of Apple Music is Svelte as well ✌️
If you're using Svelte, what do you like about it, especially compared to Vue?
Very cool! The web version of Apple Music is Svelte as well ✌️
If you're using Svelte, what do you like about it, especially compared to Vue?
November 3, 2025 at 9:42 PM
From the other side...
Very cool! The web version of Apple Music is Svelte as well ✌️
If you're using Svelte, what do you like about it, especially compared to Vue?
Very cool! The web version of Apple Music is Svelte as well ✌️
If you're using Svelte, what do you like about it, especially compared to Vue?
Lastly, there's a new 'future' object where you can opt in to features that will become defaults in the next major release. Two examples:
✅ Opt in to the new <Dialog> element for error modals
✅ Let the <Head> component use the 'data-inertia' attribute instead of 'inertia'
✅ Opt in to the new <Dialog> element for error modals
✅ Let the <Head> component use the 'data-inertia' attribute instead of 'inertia'
October 28, 2025 at 5:19 PM
Lastly, there's a new 'future' object where you can opt in to features that will become defaults in the next major release. Two examples:
✅ Opt in to the new <Dialog> element for error modals
✅ Let the <Head> component use the 'data-inertia' attribute instead of 'inertia'
✅ Opt in to the new <Dialog> element for error modals
✅ Let the <Head> component use the 'data-inertia' attribute instead of 'inertia'
Next, you can pass a callback to provide defaults for all visits 🔗
This callback receives the URL and options for the visit, and returns an object with options to merge in. Perfect for enabling View Transitions globally, for example 😉
This callback receives the URL and options for the visit, and returns an object with options to merge in. Perfect for enabling View Transitions globally, for example 😉
October 28, 2025 at 5:19 PM
Next, you can pass a callback to provide defaults for all visits 🔗
This callback receives the URL and options for the visit, and returns an object with options to merge in. Perfect for enabling View Transitions globally, for example 😉
This callback receives the URL and options for the visit, and returns an object with options to merge in. Perfect for enabling View Transitions globally, for example 😉
You can pass defaults to createInertiaApp(), and even update them at runtime. There are three categories for now.
First, you can override some defaults that were previously hardcoded, such as the default prefetch cache duration or the 'recentlySuccessful' duration in forms ⏳
First, you can override some defaults that were previously hardcoded, such as the default prefetch cache duration or the 'recentlySuccessful' duration in forms ⏳
October 28, 2025 at 5:19 PM
You can pass defaults to createInertiaApp(), and even update them at runtime. There are three categories for now.
First, you can override some defaults that were previously hardcoded, such as the default prefetch cache duration or the 'recentlySuccessful' duration in forms ⏳
First, you can override some defaults that were previously hardcoded, such as the default prefetch cache duration or the 'recentlySuccessful' duration in forms ⏳
You can enable it *per visit* using the <Link> component or the router, but you can also enable it globally, which brings me to the next new feature.
We're introducing a way to set global defaults for Inertia! 🙌
We're introducing a way to set global defaults for Inertia! 🙌
October 28, 2025 at 5:19 PM
You can enable it *per visit* using the <Link> component or the router, but you can also enable it globally, which brings me to the next new feature.
We're introducing a way to set global defaults for Inertia! 🙌
We're introducing a way to set global defaults for Inertia! 🙌
The latest release of Inertia brings support for View Transitions! 🔥
The View Transitions API is a browser feature that lets you animate between pages. It can be a simple cross-fade, and you can even animate specific elements from one page to the next.
(slow video on purpose)
The View Transitions API is a browser feature that lets you animate between pages. It can be a simple cross-fade, and you can even animate specific elements from one page to the next.
(slow video on purpose)
October 28, 2025 at 5:19 PM
The latest release of Inertia brings support for View Transitions! 🔥
The View Transitions API is a browser feature that lets you animate between pages. It can be a simple cross-fade, and you can even animate specific elements from one page to the next.
(slow video on purpose)
The View Transitions API is a browser feature that lets you animate between pages. It can be a simple cross-fade, and you can even animate specific elements from one page to the next.
(slow video on purpose)
You can chain multiple method calls, pass an array with several merge paths, or even use a key-value array if you want to use the 'match existing items' feature on multiple paths 🧩
All of this is in the docs! Enjoy! 📚
All of this is in the docs! Enjoy! 📚
October 9, 2025 at 8:43 PM
You can chain multiple method calls, pass an array with several merge paths, or even use a key-value array if you want to use the 'match existing items' feature on multiple paths 🧩
All of this is in the docs! Enjoy! 📚
All of this is in the docs! Enjoy! 📚
And lastly, a big one: huge improvements to merging props! 💪
It's a new middle ground between merge() and deepMerge() that gives you precise control over how props are merged.
You can now prepend props, and even specify multiple merge paths, including nested ones.
It's a new middle ground between merge() and deepMerge() that gives you precise control over how props are merged.
You can now prepend props, and even specify multiple merge paths, including nested ones.
October 9, 2025 at 8:43 PM
And lastly, a big one: huge improvements to merging props! 💪
It's a new middle ground between merge() and deepMerge() that gives you precise control over how props are merged.
You can now prepend props, and even specify multiple merge paths, including nested ones.
It's a new middle ground between merge() and deepMerge() that gives you precise control over how props are merged.
You can now prepend props, and even specify multiple merge paths, including nested ones.
One awesome feature introduced in Inertia 2.0 was Client-Side Visits. It lets you update the URL, props, component, etc. without making a server request.
To reduce some boilerplate, there are now several handy shortcuts to update a page prop 🪄
To reduce some boilerplate, there are now several handy shortcuts to update a page prop 🪄
October 9, 2025 at 8:43 PM
One awesome feature introduced in Inertia 2.0 was Client-Side Visits. It lets you update the URL, props, component, etc. without making a server request.
To reduce some boilerplate, there are now several handy shortcuts to update a page prop 🪄
To reduce some boilerplate, there are now several handy shortcuts to update a page prop 🪄
Really happy with the response on the <InfiniteScroll> component we released in Inertia 2.2! Here are some other new features that were merged along the way 🚀
You can now access the Progress Bar API! It's the exact same API that Inertia uses under the hood 📊
You can now access the Progress Bar API! It's the exact same API that Inertia uses under the hood 📊
October 9, 2025 at 8:43 PM
Really happy with the response on the <InfiniteScroll> component we released in Inertia 2.2! Here are some other new features that were merged along the way 🚀
You can now access the Progress Bar API! It's the exact same API that Inertia uses under the hood 📊
You can now access the Progress Bar API! It's the exact same API that Inertia uses under the hood 📊
This component is super configurable and customizable.
You can set the loading threshold, provide a default loading indicator, provide custom trigger elements, use scroll containers, get programmatic access, and more!
The docs are extensive, so be sure to check them out! 📖
You can set the loading threshold, provide a default loading indicator, provide custom trigger elements, use scroll containers, get programmatic access, and more!
The docs are extensive, so be sure to check them out! 📖
September 29, 2025 at 6:23 PM
This component is super configurable and customizable.
You can set the loading threshold, provide a default loading indicator, provide custom trigger elements, use scroll containers, get programmatic access, and more!
The docs are extensive, so be sure to check them out! 📖
You can set the loading threshold, provide a default loading indicator, provide custom trigger elements, use scroll containers, get programmatic access, and more!
The docs are extensive, so be sure to check them out! 📖
Besides automatic loading, you can also use manual mode so you can provide your own interface to load more items, like a "Load More" button.
You may even choose to switch to manual after a certain number of automatic loads 👌
You may even choose to switch to manual after a certain number of automatic loads 👌
September 29, 2025 at 6:23 PM
Besides automatic loading, you can also use manual mode so you can provide your own interface to load more items, like a "Load More" button.
You may even choose to switch to manual after a certain number of automatic loads 👌
You may even choose to switch to manual after a certain number of automatic loads 👌
Reverse mode is perfect for chat applications and timelines 💬
It flips the loading direction so scrolling up loads the next page, and scrolling down loads previous pages.
It flips the loading direction so scrolling up loads the next page, and scrolling down loads previous pages.
September 29, 2025 at 6:23 PM
Reverse mode is perfect for chat applications and timelines 💬
It flips the loading direction so scrolling up loads the next page, and scrolling down loads previous pages.
It flips the loading direction so scrolling up loads the next page, and scrolling down loads previous pages.
On the client side, just wrap your content in the <InfiniteScroll> component. That's it.
It automatically detects when you reach the end of the page and fetches the next chunk of data.
It automatically detects when you reach the end of the page and fetches the next chunk of data.
September 29, 2025 at 6:23 PM
On the client side, just wrap your content in the <InfiniteScroll> component. That's it.
It automatically detects when you reach the end of the page and fetches the next chunk of data.
It automatically detects when you reach the end of the page and fetches the next chunk of data.
On the server side, there's a new Inertia::scroll() method.
It works with full, simple, and cursor pagination, plays nice with Eloquent API resources, and also supports custom pagination implementations 🙌
It works with full, simple, and cursor pagination, plays nice with Eloquent API resources, and also supports custom pagination implementations 🙌
September 29, 2025 at 6:23 PM
On the server side, there's a new Inertia::scroll() method.
It works with full, simple, and cursor pagination, plays nice with Eloquent API resources, and also supports custom pagination implementations 🙌
It works with full, simple, and cursor pagination, plays nice with Eloquent API resources, and also supports custom pagination implementations 🙌
Lastly, there's been a big community effort to improve TypeScript support across the entire library. One example is the useForm() helper, which now lets you access nested errors using dot notation ✨
August 28, 2025 at 3:28 PM
Lastly, there's been a big community effort to improve TypeScript support across the entire library. One example is the useForm() helper, which now lets you access nested errors using dot notation ✨
A small update to the <Form> component: it now includes resetOnSuccess, resetOnError, and setDefaultsOnSuccess props to control form state after successful or failed submissions.
These are handy shortcuts for common patterns we've seen in the wild.
These are handy shortcuts for common patterns we've seen in the wild.
August 28, 2025 at 3:28 PM
A small update to the <Form> component: it now includes resetOnSuccess, resetOnError, and setDefaultsOnSuccess props to control form state after successful or failed submissions.
These are handy shortcuts for common patterns we've seen in the wild.
These are handy shortcuts for common patterns we've seen in the wild.
Alongside the <Link> and <Form> components, and the useForm() helper, the router now also supports Wayfinder objects ⛵
August 28, 2025 at 3:28 PM
Alongside the <Link> and <Form> components, and the useForm() helper, the router now also supports Wayfinder objects ⛵
Here's a big one: you can now tag prefetched data using the <Link> component or programmatically via the router. When you need to invalidate specific data, you can flush it on form submissions or manually through the router 🧹
August 28, 2025 at 3:28 PM
Here's a big one: you can now tag prefetched data using the <Link> component or programmatically via the router. When you need to invalidate specific data, you can flush it on form submissions or manually through the router 🧹
Next up: the <Link> component now supports custom components via the 'as' prop!
August 28, 2025 at 3:28 PM
Next up: the <Link> component now supports custom components via the 'as' prop!
The second is ProvidesInertiaProperties 🔥
This lets you group related props into a single class. The RenderContext object gives you access to the component name and the request instance. Check out all the ways you can use it in the Inertia::render() method!
This lets you group related props into a single class. The RenderContext object gives you access to the component name and the request instance. Check out all the ways you can use it in the Inertia::render() method!
August 28, 2025 at 3:28 PM
The second is ProvidesInertiaProperties 🔥
This lets you group related props into a single class. The RenderContext object gives you access to the component name and the request instance. Check out all the ways you can use it in the Inertia::render() method!
This lets you group related props into a single class. The RenderContext object gives you access to the component name and the request instance. Check out all the ways you can use it in the Inertia::render() method!
First, there's ProvidesInertiaProp 💫
At first glance, it looks like Laravel's Arrayable interface, but here you get a PropertyContext object, which gives you access to the property key, the request instance, and all other props for the page.
At first glance, it looks like Laravel's Arrayable interface, but here you get a PropertyContext object, which gives you access to the property key, the request instance, and all other props for the page.
August 28, 2025 at 3:28 PM
First, there's ProvidesInertiaProp 💫
At first glance, it looks like Laravel's Arrayable interface, but here you get a PropertyContext object, which gives you access to the property key, the request instance, and all other props for the page.
At first glance, it looks like Laravel's Arrayable interface, but here you get a PropertyContext object, which gives you access to the property key, the request instance, and all other props for the page.
As you can see, it's super powerful and a great alternative to useForm() for most use cases, but even if you need more control, you can also control it programmatically using a ref 👏
August 14, 2025 at 4:47 PM
As you can see, it's super powerful and a great alternative to useForm() for most use cases, but even if you need more control, you can also control it programmatically using a ref 👏
One really cool thing is that it supports the 'dotted key' notation. This is especially great since it matches Laravel's validation error keys.
August 14, 2025 at 4:47 PM
One really cool thing is that it supports the 'dotted key' notation. This is especially great since it matches Laravel's validation error keys.