Постоянные макеты в Inertia и Laravel

Я использую Laravel 11 с Vue 3, InertiaJS и Vite. Я настроил административную область для своего сайта и хочу использовать постоянный макет.

Я просмотрел документы по инерции и увидел следующее

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

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

Я использую пакет laravel, который я создал в качестве основы. Он содержит мой макет со ссылкой «@fire».

Итак, я добавил это в свой компонент;

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

defineOptions({ layout: Admin })

Мой текущий файл app.js выглядит следующим образом:

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)
  },
})

Опять же, у меня есть ссылка «@», которую я установил в Vite. Мне также нужно проверить, исходит ли представление для загрузки из моего пакета или корневой папки ресурсов, что является причиной оператора if 'name.startsWith('PackageName::')'.

Насколько я вижу, я настроил это правильно, но я вставил входные данные в свой макет, и он теряет свое содержимое каждый раз, когда я меняю страницу.

Любая помощь будет очень признательна.

🤔 А знаете ли вы, что...
В Laravel есть удобные инструменты для локализации и мультиязычных приложений.


56
1

Ответ:

Решено

Чтобы использовать функцию макета Inertia, вам необходимо указать макет на самой отображаемой странице. Поскольку вы используете страницы пакета, вам может потребоваться определить макеты в экземпляре приложения:


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
  },

Обязательно ознакомьтесь с документацией (раздел «Макеты по умолчанию»)