Laravel8搭配Vue3使用报Component is missing template or render function错误如何解决

你触发的报错根因是createApp传入的根配置对象没有定义模板/渲染函数，也没有将注册的Welcome组件投入使用。

解决方案 #

方案1：直接将Welcome组件作为根组件挂载 #

修改app.ts代码如下：

require('./bootstrap');

import { createApp } from "vue";
import Welcome from "./components/Welcome.vue";

// 直接传入Welcome作为根组件
const app = createApp(Welcome).mount("#app");

方案2：给根配置对象添加模板，调用注册的Welcome组件 #

如果后续要在根级别注册多个全局组件/添加全局逻辑，可以保留当前结构，补充模板配置：

require('./bootstrap');

import { createApp } from "vue";
import Welcome from "./components/Welcome.vue";

const app = createApp({
    // 补充模板，渲染Welcome组件
    template: `<Welcome />`,
    components: {
        Welcome,
    },
}).mount("#app");

额外检查项 #

确认你的页面blade模板中存在对应的挂载节点，且正确引入编译后的资源：

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

如果选择方案2，laravel-mix 6+调用.vue({version:3})时会默认开启Vue运行时编译器，无需额外配置，如果你做过自定义alias配置要确认没有强制使用仅运行时版本的Vue。

修改完之后重新运行npm run dev编译资源即可生效。

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