Persistent layouts not persisting

Hi,

I am using Laravel 11 with Vue 3, InertiaJS and Vite. I have set up a admin area for my site and I want to use a persistent layout.

I have looked at the docs for inertia and saw the following

<script setup>
import Layout from './Layout'

defineOptions({ layout: Layout })
</script>

I am using a laravel package that I have created as my base, it contains my layout using a reference '@fire'.

So I have added that to my component;

import Admin from "@fire/Pages/Layouts/Admin.vue"

defineOptions({ layout: Admin })

My current app.js file looks as followed:

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = Object.assign(
      {}, 
      import.meta.glob('@pages/Pages/**/*.vue', { eager: true }), 
      import.meta.glob('./Pages/**/*.vue', { eager: true })
    );

    let page
    if (name.startsWith('PackageName::')) {
      page = pages[`./Pages/${name.split('PackageName::')[1]}.vue`]
    } else {
      page = pages[`/resources/js/Pages/${name}.vue`]
    }
    return page
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

Again I have a '@' reference that I have set up in Vite. I also have to chack if the view to load is coming from my package or the root resources folder that is the reason for the 'name.startsWith( 'PackageName::' )' if statement.

As far as I can see I have set this up correctly but I have put an input in my layout and it loses its content each time I change the page.

Any help would be much appreciated.