Pascal Baljet

@pascalbaljet

Husband of Esmée, dad of Loïs and Kate ❤️ Works at @laravel.com‬. Open-source enthusiast. Also builds inertiaui.com.

147 Following1,530 Followers525 Posts

YouTube Bluesky

Is this your profile?Claim it and pascalbaljet.dirty.social is yours.Claim profile

Pascal Baljet@pascalbaljet· 25d

<Form :form /> ✨ That's it. Backend-populated, or composed in the frontend. CSS-variable theming. Cohesively tuned components. Presenters split from composables/hooks. Override or extend. Integrates with Laravel validation, Precognition, uploads/storage, and model binding.

Pascal Baljet@pascalbaljet· Jul 9

This was planned as a separate package, but it's now folded into and integrated with the Form Builder and Components 📁 Temporary uploads, pause/resume/retry, direct-to-S3 + multipart support, drag-and-drop, image previews, reordering, and Spatie Media Library integration 💅

Pascal Baljet@pascalbaljet· Jun 30

Thought I'd never finish this package. At one point I was convinced AI would make it irrelevant before I shipped it. Turns out AI loves this package. Pair it with an agent and you build crazy fast 💨

Pascal Baljet@pascalbaljet· May 20

Next up: router.once(). Same as router.on(), but auto-unsubscribes after the first event. Contributed by @sebdd.net 👏

Pascal Baljet@pascalbaljet· May 20

We also added dynamic data to usePoll() 🔁 You can now pass a function as the request options and Inertia will re-evaluate it on every tick. No more stale snapshots from props or state captured at mount.

Pascal Baljet@pascalbaljet· May 20

Today we're shipping new polling features to Inertia.js! ⏱️ usePoll() now accepts a mode option to control the behavior between requests.

Pascal Baljet@pascalbaljet· May 6

Lastly, you may now pass a host option to the SSR config to restrict the server to a specific host. It still defaults to 0.0.0.0, but it's there if you need it ✨

Pascal Baljet@pascalbaljet· May 6

There are two places where Inertia injects some minimal styling: the progress bar and the error dialog. When you're using a Content Security Policy, CSP for short, you may now pass a nonce to createInertiaApp() and it'll be applied to those styles 🔒

Pascal Baljet@pascalbaljet· May 6

Instead, the <Deferred> component renders a new rescue slot, which is great for showing a custom error message and a retry button 🔁

Pascal Baljet@pascalbaljet· May 6

Inertia 3.1 is out, and it brings rescued deferred props! 🪄 Your deferred prop might call a flaky third-party API or throw an exception. With the new rescue option, the exception is still reported, but your users won't see an error response.

Pascal Baljet@pascalbaljet· Apr 21

About time! 🥵

Pascal Baljet@pascalbaljet· Apr 11

💅

Pascal Baljet@pascalbaljet· Apr 11

I'm redesigning the Inertia Table website 👀 If you're using it and want to be featured, send me a DM with a testimonial. I'll include a backlink to your project or company 🙏

Pascal Baljet@pascalbaljet· Apr 3

Date filtering has become much more advanced in the next version of Inertia Table 🔥

Pascal Baljet@pascalbaljet· Apr 3

This might end up being an expensive day for tokens

Pascal Baljet@pascalbaljet· Apr 1

Pascal Baljet@pascalbaljet· Mar 31

Inertia Table 4 on its way: Inertia 3 support, plus Headless UI and Axios ripped out entirely. Replaced with the Vanilla package, the same primitives that power Inertia Modal. If you're using both packages, your bundle just got significantly lighter.

Pascal Baljet@pascalbaljet· Mar 25

Introducing the useHttp hook. The same developer experience as useForm, but for plain HTTP requests. Reactive state, error handling, file upload progress, and request cancellation, all without triggering a page visit.

Pascal Baljet@pascalbaljet· Mar 25

Optimistic updates are now built into Inertia. Chain optimistic() before any router visit to apply changes instantly. If the request fails, props revert automatically 💫

Pascal Baljet@pascalbaljet· Mar 25

The new @inertiajs/vite plugin handles page resolution, code splitting, and SSR setup automatically. Your entire entry point can now be a single function call. SSR in development no longer requires a separate Node.js server either. Just run `composer dev` ⚡️

Pascal Baljet@pascalbaljet· Mar 24

One more Inertia 3 beta! We've added Blade components to the Laravel adapter. You can now use <x-inertia::app /> and <x-inertia::head> instead of the inertia/inertiaHead directives. The directives still work, so no breaking changes! 🎯

Pascal Baljet@pascalbaljet· Mar 5

Custom error pages for 500s and other exceptions now have a proper API. The 'handleExceptionsUsing()' method lets you render Inertia error pages with full access to shared data 🛡️

$// app/Providers/AppServiceProvider.php use Inertia\ExceptionResponse; use Inertia\Inertia; Inertia::handleExceptionsUsing(function (ExceptionResponse $response) { if (in_array($response->statusCode(), [403, 404, 419, 429, 500, 503])) { return $response->render('ErrorPage', [ 'status' => $response->statusCode(), ])->withSharedData(); } });$

Pascal Baljet@pascalbaljet· Mar 5

The new 'useLayoutProps' hook lets layouts declare defaults that pages can override. Pages update layout state with 'setLayoutProps()'. Supports nested layouts as well.

<!-- AppLayout.vue -->
<script setup>
import { useLayoutProps } from '@inertiajs/vue3'

const layout = useLayoutProps({
subtitle: '',
})
</script>

<template>
<div v-if="layout.subtitle" class="banner">
{{ layout.subtitle }}
</div>
<slot />
</template>

<!-- Any page -->
<script setup>
import { setLayoutProps, resetLayoutProps } from '@inertiajs/vue3'

setLayoutProps({ subtitle: 'Welcome back!' })

// Reset to defaults...
resetLayoutProps()
</script>

Pascal Baljet@pascalbaljet· Mar 5

Instant visits swap to the target page component immediately while the server request fires in the background. The user sees the new page right away with shared props, and the full data merges in when the response arrives ✨

<template>
<Link
href="/features/navigation/target"
component="Features/Navigation/Target"
>
Navigate Instantly
</Link>
</template>

// Or programmatically with placeholder props...
router.visit(url, {
component: 'Features/Navigation/Target',
pageProps: (currentProps, sharedProps) => ({
...sharedProps,
greeting: 'Loading from server...',
items: [],
}),
})

Pascal Baljet@pascalbaljet· Mar 5

Optimistic updates are now built into Inertia. Chain 'optimistic()' before any router visit to apply changes instantly. If the request fails, props revert automatically 💫

$import { router } from '@inertiajs/vue3' router .optimistic((props) => ({ post: { ...props.post, is_favorite: !props.post.is_favorite, }, })) .post(`/posts/${post.id}/favorite`)$

Pascal Baljet@pascalbaljet· Mar 5

Introducing the 'useHttp' hook. It gives you the same developer experience as 'useForm', but for plain HTTP requests. Reactive state, error handling, file upload progress, and request cancellation, all without triggering a page visit.

<script setup>
import { useHttp } from '@inertiajs/vue3'

const http = useHttp({ name: '' })

function postToApi() {
http.post('/api/endpoint', {
onSuccess: (response) => {
console.log(response)
},
})
}
</script>

<template>
<input v-model="form.name" />
<button :disabled="form.processing" @click="postToApi">
{{ form.processing ? 'Sending...' : 'Send Request' }}
</button>
</template>

Pascal Baljet@pascalbaljet· Mar 5

The new @inertiajs/vite plugin handles page resolution, code splitting, and SSR setup automatically. Your entire entry point can now be a single function call: createInertiaApp() ⚡️

// vite.config.js
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
inertia(),
vue(),
],
})

// resources/js/app.js
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp()

Pascal Baljet@pascalbaljet· Feb 28

🔥

Pascal Baljet@pascalbaljet· Feb 27

TIL the Web Animations API lets you trigger animations in JavaScript and await their completion ✨ No CSS keyframes needed. Works in all modern browsers.

Pascal Baljet@pascalbaljet· Feb 4

With the latest version of Laravel Precognition, you can now validate array and nested object fields using wildcards ✨ form.validate('author.*') form.validate('contributors.*.email') form.validate('contributors.*.*')