Navigation

You can use Svelte v5 with InertiaJS really easily TODAY.

You can use Svelte v5 with InertiaJS really easily TODAY.

Svelte V5 is still in alpha, and a lot of things are still likely to change, but you can try it with InertiaJS today with ONE LINE of code changed.

This means you get to play with Runes, Snippets, and more.

How, then?

Simply install the alpha preview of Svelte 5:

npm install svelte@next

Then, in this snippet in your app.js where you create the actual Inertia app:

import { createInertiaApp } from '@inertiajs/svelte'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
    return pages[`./Pages/${name}.svelte`]
  },
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
})

Svelte 5 changes how components mount, and they're now no longer classes.

So all you have to do is change this line:

new App({ target: el, props })

By importing the new mount() function:

import { mount } from 'svelte'

Then change the app line to:

mount(App, { target: el}, props)

And there we go! it should just all work as before, thanks to the fact that V5 is largely backwards-compatible with V4.