Laravel 8中Vue 3组件无法渲染问题求助

我在Laravel中搭建了简单的Vue组件场景，但组件始终无法渲染，仅能看到Blade页面里的原生HTML内容，控制台也无任何报错信息。相关代码和环境如下：

Blade页面代码 #

<section>
    <h1>Carousel</h1>
    <carousel :slides="@json($data->slides)">
</carousel>

Vue组件代码(Carousel.vue) #

<template>
    <fragment>
        <h1>My component</h1>
        {{ slides }}
    </fragment>
</template>

<script>
export default {
    props: [
      'slides'
    ],
    mounted() {
        console.log("mounted")
    }
}
</script>

app.js组件注册代码 #

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('carousel', require('./components/web/partials/Carousel.vue').default);

const app = new Vue({
    el: '#app',
});

webpack.mix.js配置 #

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

当前依赖版本 #

{
    "laravel/ui": "^3.3",
    "vue": "^3.2.26",
    "vue-template-compiler": "^2.6.11",
    "sass": "^1.32.11",
    "sass-loader": "^11.0.1",
    "vue-loader": "^16.2.0"
}

问题现象 #

• 访问页面仅显示Blade中的<h1>Carousel</h1>，Vue组件内容完全不渲染
• 浏览器控制台无任何错误提示
• 初始安装Laravel UI时自带的ExampleComponent同样无法渲染（已从app.js中移除）
• 已尝试切换Vue及vue-loader版本，查阅同类问题后仍无法解决

排查与解决步骤 #

1. 修复Vue版本不兼容问题 #

当前使用Vue 3，但搭配了Vue 2专属的vue-template-compiler，这是核心冲突：

• Vue 3无需vue-template-compiler，已被@vue/compiler-sfc替代
• 执行以下命令调整依赖：

npm uninstall vue-template-compiler
npm install @vue/compiler-sfc --save-dev

2. 确认Blade页面存在Vue挂载点 #

确保所有Vue组件都包裹在id="app"的容器内，比如布局文件resources/views/layouts/app.blade.php中：

<body>
    <div id="app">
        @yield('content')
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

组件所在的Blade页面需继承该布局，或直接包含#app容器。

3. 修正Vue组件根元素写法 #

Vue 3不支持<fragment>作为根元素，直接移除该标签，改用单根容器或多根元素：

<template>
    <div>
        <h1>My component</h1>
        {{ slides }}
    </div>
</template>

4. 重新编译资源并清理缓存 #

执行编译命令后强制刷新浏览器缓存：

npm run dev
# 生产环境用
npm run prod

刷新页面时按住Ctrl+F5，避免加载旧的编译文件。

5. 改用Vue 3标准初始化方式 #

Vue 3推荐使用createApp替代Vue 2的初始化写法，修改app.js：

require('./bootstrap');

import { createApp } from 'vue';
import Carousel from './components/web/partials/Carousel.vue';

const app = createApp({});
app.component('carousel', Carousel);
app.mount('#app');

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