Estoy siguiendo la siguiente guía, que muestra cómo habilitar " Modales basados en rutas " en Inertia.js.
La publicación está escrita para Vue2, y estoy usando Vue3, y tengo algunos problemas para que funcione.
Este es mi "Componible" para mi método "useModal":
//Composables/useModal.js const useModal = { computed: { modalComponent() { return this.$page.props.modal ? () => import(`@/Pages/${this.$page.props.modal}`) : false } } } export { useModal } Luego lo declaro en mi archivo app.js como se muestra a continuación:
//app.js //... import {useModal} from "@/Composables/useModal"; createInertiaApp({ title: (title) => `${title}`, resolve: (name) => require(`./Pages/${name}.vue`), setup({ el, app, props, plugin }) { return createApp({ render: () => h(app, props) }) .use(plugin) .component("Link", Link) .mixin(useModal) .mixin({ methods: { route } }) .mount(el); }, }); En mi diseño principal, llamado AppLayout , he declarado el Component :
<body> <!-- Main elements are here, removed for clarity --> <Component v-bind="$page.props" v-if="$root.modalComponent" :is="$root.modalComponent" /> </body> Además, he declarado el método modal() en mi AppServiceProvider :
public function boot() { ResponseFactory::macro('modal', function ($modal) { inertia()->share(['modal' => $modal]); }); }Ahora, estoy tratando de representar un componente Vue en un modal como este:
//FileController.php public function show(File $file){ \inertia()->modal('File/Show'); return $this->index($file); }Al vincular al componente modal, se emite la siguiente Advertencia:
[Vue warn]: Tipo de VNode no válido: indefinido (indefinido) en <Clave anónima=0...
Terminé arreglando esto usando defineAsyncComponent en su lugar:
//Composables/useModal.js import {defineAsyncComponent} from "vue"; const useModal = { computed: { modalComponent() { return this.$page.props.modal ? defineAsyncComponent(() => import(`@/Pages/${this.$page.props.modal}`)) : false } } } export { useModal }