Laravel+Inertia(Vue3)全局注册Link组件不生效问题咨询

问题原因 #

你在app.js中全局注册组件时指定的名称为InertiaHead和InertiaLink，但页面模板里仍然使用<Link>、<Head>标签调用组件，Vue无法匹配到对应的组件定义，因此无法正常渲染内容。Vue3默认会将未注册的自定义标签识别为原生自定义元素，不会抛出明确的组件未注册错误，所以你看不到报错提示。

解决方法 #

你可以任选以下一种方案修改：

• 方案1：保留现有全局注册配置，将页面模板中的标签改为你注册的名称即可，也就是把<Link>替换为<InertiaLink>，<Head>替换为<InertiaHead>。
• 方案2：修改app.js中的全局注册代码，将组件名改为你模板中正在使用的名称，对应调整setup部分的代码：

setup({ el, app, props, plugin }) {
  createApp({ render: () => h(app, props) })
    .use(plugin)
    // 修改注册的组件名为你模板里用的Head、Link
    .component("Head", Head)
    .component("Link", Link)
    .mixin({ methods: { route } })
    .mount(el);
}

修改完成后重新编译前端资源，后续所有页面都可以直接使用<Head>、<Link>标签，无需单独导入注册。

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