Laravel9+Inertia+Vue3全局组件注册失败求助

核心错误原因 #

你遇到的 app.component is not a function 报错，本质是传错了app对象：

• Inertia setup函数里的app参数是Inertia的页面组件实例，不是Vue应用实例，它没有component方法。
• 你需要传递的是createApp()创建的Vue应用实例，并且要在挂载应用前完成全局组件注册。

具体修复步骤 #

1. 修正Vue应用实例的使用逻辑 #

修改createInertiaApp中的setup函数，确保在挂载前注册全局组件，并传递正确的Vue实例：

createInertiaApp({
    ...
    setup({ el, app, props, plugin }) {
        // 创建Vue应用实例，暂不挂载
        const vueApp = createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy);

        // 传递Vue应用实例给全局组件注册函数
        globalComponents(vueApp);

        // 最后挂载应用
        vueApp.mount(el);

        return vueApp;
    },
});

2. 修正Lucide图标文件的对象初始化 #

你的图标文件里错误地将icons初始化为数组，而实际需要的是对象（因为你用字符串作为键名）：

// 原代码（错误）
const icons = [];

// 修改为（正确）
const icons = {};

数组只能用数字索引，用字符串键名会导致组件无法被正确遍历和注册。

验证 #

完成以上修改后，全局Lucide图标组件应该能正常使用，控制台报错也会消失。

内容的提问来源于stack exchange，提问作者Talha Siddiqui