Published on September 9, 2020

This is a big release thanks to the excellent work done by @pedroborges, the maintainer of the Svelte adapter. 👏

Persistent layouts

This release adds support for persistent layouts (#203). Page components can now declare a persistent layout from inside the <script context="module"> block:

<script context="module">
  import Layout from '@/Shared/Layout.svelte'
  export const layout = Layout

Alternatively, you can also use the short array syntax to declare nested layouts:

<script context="module">
  import Layout from '@/Shared/Layout.svelte'
  import DashboardLayout from '@/Shared/DashboardLayout.svelte'
  export const layout = [Layout, DashboardLayout]

This is a breaking change (hence the 0.3.0 release), since it requires that the resolveComponent closure passed to InertiaApp return the page module and not just the default export.

import { InertiaApp } from '@inertiajs/inertia-svelte'

const app = document.getElementById('app')

new InertiaApp({
  target: app,
  props: {
    initialPage: JSON.parse(,
    resolveComponent: name =>
-      import(`@/Pages/${name}.svelte`).then(module => module.default),
+      import(`@/Pages/${name}.svelte`),

New "use:inertia" directive

This release also includes a new use:inertia directive (#206), which can be used instead of the InertiaLink component to add Inertia behaviour to any element.

  import { inertia } from '@inertiajs/inertia-svelte'

<a href="/users" use:inertia>Users</a>

  use:inertia={{ href: '/users/100', method: 'post', data: { '_method': 'delete' }}}
  on:click={() => alert('User deleted')}>

  use:inertia={{ method: 'post', data: { '_method': 'put', 'visited': true }}}>

Headers prop

Finally, this release includes the addition of a new headers prop on the InertiaLink component (#204).

<InertiaLink href="/" headers={{ foo: bar }}>