Vue组件无法在Laravel Blade中渲染问题咨询

排查与解决步骤 #

1. 确认Vue挂载容器的范围 #

你的Vue实例挂载在#app元素上，必须把要渲染的组件放在这个容器内部，否则Vue无法识别。修改Blade模板：

<div id="app">
    <div>
        <h1> <example-component></example-component> </h1>
    </div>
</div>

另外，HTML模板里推荐用**短横线命名（kebab-case）**引用组件，虽然PascalCase写法在Vue中能兼容，但短横线命名更符合HTML标签的规范，避免和原生标签冲突。

2. 检查JS资源是否正确引入 #

确保Blade模板里已经引入编译后的app.js，根据你的构建工具选择对应方式：

• 用Laravel Mix的话：

<script src="{{ mix('js/app.js') }}"></script>

• 用Vite的话：

@vite('resources/js/app.js')

要把这个脚本放在页面底部，或者确保在DOM加载完成后执行。

3. 查看控制台是否有报错 #

打开浏览器F12的Console面板，排查JS错误：

• 如果提示组件找不到，确认ExampleComponent.vue的文件路径是否和app.js里的导入路径匹配（比如是否在resources/js/components/目录下）
• 如果有Vue相关报错，检查是否安装的是Vue 3（你的代码是Vue 3的写法，不要混用Vue 2的语法）

4. 验证组件注册与编译 #

• app.js里的组件注册代码没问题，但可以把组件名改成短横线格式，和模板保持一致：

app.component("example-component", ExampleComponent);

• 运行资源编译命令，确保代码生效：
  • Mix：npm run dev或npm run build
  • Vite：npm run dev

修正后的完整示例 #

Blade模板 #

<!DOCTYPE html>
<html>
<head>
    <title>Vue组件测试</title>
</head>
<body>
    <div id="app">
        <div>
            <h1><example-component></example-component></h1>
        </div>
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

ExampleComponent.vue #

<template>
    <h1>Teste</h1>
</template>

<script>
export default {
    mounted() {
        console.log("Component mounted.");
    },
};
</script>

app.js #

require("./bootstrap");

import { createApp } from "vue";

import ExampleComponent from "./components/ExampleComponent";

const app = createApp({});

app.component("example-component", ExampleComponent);
app.mount("#app");

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