在Laravel 11+Inertia.js v2环境下如何在Blade文件中使用Vue 3组件？

嗨，我之前也踩过这个坑！在Laravel 11搭配Inertia.js v2的环境里，Blade是服务端渲染模板，而Inertia接管的Vue实例只负责@inertia指令对应的DOM区域——你把组件注册到Inertia的Vue实例里，Blade页面的标签根本不在这个实例的管辖范围内，自然就不生效啦。给你几个实用的解决办法：

方法1：手动在Blade页面挂载独立Vue实例 #

适合仅在单个/少数Blade页面中使用Vue组件的场景，步骤如下：

• 第一步：在resources/js目录新建blade-vue-components.js，注册组件并初始化独立Vue实例：

import { createApp } from 'vue';
import MyVueComponent from './Components/MyVueComponent.vue';

// 创建Vue实例并注册目标组件
const app = createApp({});
app.component('my-vue-component', MyVueComponent);

// 挂载到指定容器（推荐指定容器，避免干扰Inertia的Vue实例）
app.mount('#blade-vue-root');

• 第二步：在vite.config.js中添加该文件为编译入口，让Vite打包成可引入的脚本：

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
        'resources/js/blade-vue-components.js', // 新增编译入口
      ],
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
});

• 第三步：在Blade文件中添加挂载容器、引入脚本并使用组件：

<!DOCTYPE html>
<html>
<head>
    @vite(['resources/css/app.css', 'resources/js/blade-vue-components.js'])
</head>
<body>
    <!-- Vue组件挂载容器 -->
    <div id="blade-vue-root">
        <my-vue-component></my-vue-component>
    </div>

    <!-- 保留Inertia的根节点（如果页面需要Inertia内容） -->
    @inertia
</body>
</html>

注意：这个独立Vue实例和Inertia的Vue实例完全隔离，若需共享状态，要单独用Pinia或Vuex处理，无法直接复用Inertia内的状态。

方法2：将Blade页面转为Inertia页面（推荐场景允许时使用） #

如果该Blade页面的功能可以完全用Inertia实现，这是最顺畅的方案——毕竟Inertia的设计就是让你用Vue组件构建页面，无需在Blade和Vue间来回切换：

• 第一步：在resources/js/Pages目录创建对应Inertia页面组件，比如MyBladeEquivalentPage.vue：

<template>
  <div>
    <!-- 用Vue语法重写原Blade内容 -->
    <my-vue-component></my-vue-component>
  </div>
</template>

<script setup>
import MyVueComponent from '../Components/MyVueComponent.vue';
</script>

• 第二步：修改Laravel路由，将返回Blade改为返回Inertia页面：

use Inertia\Inertia;

Route::get('/your-target-page', function () {
    return Inertia::render('MyBladeEquivalentPage');
});

这样就能在Inertia的Vue上下文里正常使用组件，不用再处理上下文分离的问题。

方法3：在Inertia根实例外挂载组件 #

如果你的Blade页面已经包含@inertia指令（页面核心内容由Inertia管理），但想在导航栏、页脚等Blade渲染区域使用Vue组件，可以这样做：

• 在resources/js/app.js中，除了初始化Inertia的Vue实例，额外创建一个实例接管Blade中的组件：

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import MyVueComponent from './Components/MyVueComponent.vue';

// 初始化Inertia的Vue实例（原有逻辑保留）
createInertiaApp({
  resolve: name => require(`./Pages/${name}.vue`),
  setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el);
  },
});

// 额外创建Vue实例，用于Blade区域的组件
const bladeVueApp = createApp({});
bladeVueApp.component('my-vue-component', MyVueComponent);
bladeVueApp.mount('#blade-component-container');

• 在Blade页面中添加对应容器：

<body>
    <!-- Blade渲染的区域，挂载Vue组件 -->
    <div id="blade-component-container">
        <my-vue-component></my-vue-component>
    </div>

    <!-- Inertia的根节点 -->
    @inertia
</body>

备注：内容来源于stack exchange，提问作者Khaled Nadam