如何在Laravel的Blade文件中结合ViteJS使用Vue组件

你当前的代码问题在于Card组件没有被注册到Vue应用中，所以blade里的<Card />无法被识别。下面是两种可行的解决方式：

方法一：全局注册组件（适合全局复用的组件） #

修改resources/js/app.js，引入Card组件并全局注册：

import './bootstrap';
import { createApp } from "vue";
import App from './App.vue';
import Card from './Card.vue'; // 注意路径：如果Card在components文件夹下，改成'./components/Card.vue'

const app = createApp(App);
app.component('Card', Card); // 全局注册组件，命名为Card
app.mount('#app');

之后就能直接在home.blade.php中使用组件，还可以传递props：

<div id="app">
    <Card film-id="123" /> <!-- props用kebab-case格式对应Vue里的filmId -->
</div>

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

方法二：在根组件App.vue中局部注册（适合仅在特定页面使用的组件） #

如果不想全局注册组件，可以在App.vue中引入并局部注册：

<template>
    <!-- 在这里使用Card组件，可传递props -->
    <Card film-id="456" />
</template>

<script>
import Card from './Card.vue'; // 同样注意路径正确性

export default {
    components: {
        Card // 局部注册组件
    }
}
</script>

此时home.blade.php中的<div id="app">会自动渲染App.vue里的内容，包含Card组件。

注意事项 #

• 确认组件文件路径正确：如果你的Card.vue放在resources/js/components目录下，引入路径要改为./components/Card.vue
• 运行npm run dev启动Vite开发服务器，或执行npm run build生成生产环境资源，确保组件被正确编译
• 传递props时，blade中要使用短横线分隔的格式（film-id），对应Vue组件中的驼峰命名（filmId）

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