I'm using Laravel 9 with Vue 3 and Inertia. I set up a basic application with a default layout component for all pages, that I'm resolving in the following way:
app.js
import { createApp, h } from 'vue'
import { createInertiaApp, Head } from '@inertiajs/inertia-vue3'
import Layout from './Shared/Layout';
createInertiaApp({
resolve: name => {
let page = require(`./Pages/${name}`).default;
page.layout ??= Layout;
return page;
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.component("Head", Head)
.mount(el)
},
});
Even though everything is working as expected I get a warning from Vue in the console every time I navigate to a new page.
console output:
[Vue warn]: Failed to resolve component: Layout
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Where exactly in my project do I exclude something from component resolution and how can I change the compiler options?