I have a application which is built with the VILT-stack (Vue, Inertia, Laravel, Tailwind). I have some components like cards
which could be used everywhere in the application. Because I don't want to manually import these components every time I built a function that registers the components in certain directories:
/**
* Register components from the ./components and ./components/core
* directories. This way these components don't have to be imported
* manually every time.
*
* @param {Vue instance} app
*/
function registerGlobalComponents (app) {
const requireComponent = require.context(
'./components' || './components/core',
true,
/\.vue$/
);
for (const file of requireComponent.keys()) {
const componentConfig = requireComponent(file);
const name = file
.replace(/index.js/, '')
.replace(/^\.\//, '')
.replace(/\.\w+$/, '');
const componentName = upperFirst(camelCase(name));
app.component(componentName,
componentConfig.default || componentConfig);
}
}
The creation of the inertia app happens in the same file:
/**
* Create an Inertia app instance.
*/
createInertiaApp({
resolve: (name) => import(`./Pages/${name}`),
setup ({ el, app, props, plugin }) {
const vueApp = createApp({ render: () => h(app, props) });
/**
* Mixin for showing notifications.
*/
vueApp.mixin({
data: function () {
return {};
},
computed: {
pageNotifications () {
return this.$page.props.notification;
}
}
});
vueApp.use(plugin).mount(el);
registerGlobalComponents(vueApp);
}
});
Because my card
component is in the /components/core
directory I have to call the component in the template
tag like this: <core-card> content </core-card>
. Now my card is perfectly showing on the page as you can see in the image.
But somehow I get the following error:
[Vue warn]: Failed to resolve component: core-card
I get this warning for all my other components that are registered through this registerGlobalComponents()
function. Why do I get this warning when my components are showing correctly and working fine?
The problem why I got this error was because I was mounting the app before I registered the components. This resulted in the components being shown in my application but still getting the warning that the component couldn't be found. By importing the components before the mount this problem was solved.
I previously imported the components this way:
createInertiaApp({
resolve: (name) => import(`./Pages/${name}`),
setup ({ el, app, props, plugin }) {
const vueApp = createApp({ render: () => h(app, props) });
/**
* Mixin for showing notifications.
*/
vueApp.mixin({
data: function () {
return {};
},
computed: {
pageNotifications () {
return this.$page.props.notification;
}
}
});
vueApp.use(plugin).mount(el);
registerGlobalComponents(vueApp);
}
});
And changed the order of calling plugin
, registerGlobalComponents
and the mount
of the app like this:
vueApp.use(plugin);
registerGlobalComponents(vueApp);
vueApp.mount(el);
I was able to fix this problem thanks to Robert from the official Inertia Discord. If he wants to claim the bounty I will definitely award him the points.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With