Persistent layouts in Inertia and Laravel

Question

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.

Answer 1

Make sure to use <Link/> for navigation instead of regular <a> tags. See the docs.

---

Another thing that might cause the issue is that in order to use Inertia's layout feature, you have to reference the layout in the rendered page itself. Since you're using pages of package you might need to define the layouts in the app instance:

createInertiaApp({
  resolve: name => {
    const pages = Object.assign(
      ...
    
    if (name.startsWith('PackageName::')) {
       
      page = pages[`./Pages/${name.split('PackageName::')[1]}.vue`]
      // Add the layout here: 
      page.default.layout = AdminLayout // Or whatever layout you want to use
    } else {
      page = pages[`/resources/js/Pages/${name}.vue`]
      page.default.layout = DefaultLayout
    }
    return page
  },

Check out the docs ("Default layouts" section).