Vue 3 内联组件在 Laravel Blade 中无法调用问题求助

一、核对组件注册逻辑 #

1. 单文件组件（test-component）注册检查 #

确保app.js里的导入和全局注册没有问题：

// app.js
import { createApp } from 'vue';
import TestComponent from './components/TestComponent.vue';

const app = createApp({});
// 注册名用短横线，和模板里的调用名保持一致
app.component('test-component', TestComponent);

2. 内联组件（example-component）注册检查 #

内联组件要确保定义和注册同步完成：

// app.js
app.component('example-component', {
  template: `
    <div>内联组件测试内容</div>
  `
});

二、确认容器与挂载的匹配性 #

1. 必须保证app.js最后挂载到Blade里的目标容器：

// app.js 末尾添加挂载逻辑
app.mount('#app');

2. Blade模板里的组件必须放在#app容器内部：

<!-- Blade模板代码 -->
<div id="app">
  <test-component></test-component>
  <example-component></example-component>
</div>

注意：组件放在容器外的话，Vue不会处理渲染。

三、验证构建与资源引入 #

1. 重新执行构建，确保生成最新的app.js：

npm run build

2. Blade里要正确引入编译后的资源，根据你的构建工具选择：

<!-- Vite环境 -->
@vite('resources/js/app.js')

<!-- Mix环境 -->
<script src="{{ mix('js/app.js') }}"></script>

别同时引入旧的JS文件，避免冲突覆盖。

四、用Vue DevTools排查状态 #

打开浏览器的Vue DevTools，查看两个关键点：

• 是否识别到Vue实例（没识别的话说明挂载失败）
• 组件列表里有没有test-component和example-component（没有的话说明注册失败）

五、细节排查 #

1. 组件命名严格对应：注册用短横线的话，模板里也必须用短横线；注册用驼峰的话，模板里要转成短横线（比如TestComponent对应test-component）
2. 清Laravel视图缓存，避免旧模板干扰：

php artisan view:clear

3. 检查浏览器网络请求，确认app.js是200状态加载成功的

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