Vue3/Inertia Failed to resolve component

Question

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?

Turbosupercharger

FYI someone does this manually here using import statements alone: Register vue component globally on inertia/vue instance - your generic implementation might work but does the static approach give the same message? – Harve

Answer 1

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.

Turbosupercharger

Answer 2

Thanks, but for me, it only changed when I changed the vue route:

import { useForm } from "@inertiajs/inertia-vue3";

to

import { useForm } from '@inertiajs/vue3';

Hols