能否在Vue的<div id="app">外部渲染Vue组件？

完全可以在Vue根容器外部渲染组件，针对你的Laravel Blade布局场景，下面提供两种实用的实现方案：

方案1：创建多Vue实例独立挂载 #

这种方式适合外部组件和根容器内的组件逻辑完全独立的场景，通过给外部区域单独创建Vue实例来挂载组件。

步骤1：修改Blade模板，添加外部挂载容器 #

在toolbar-top区块里给组件包裹一个带id的容器：

@extends('index_vue')

@section('toolbar-top')
<div class="card" id="toolbar-app">
    <example-vue-component></example-vue-component> <!-- 现在可以被渲染 -->
</div>
@endsection

@section('toolbar-bottom')
@endsection

@section('toolbar-middle')
    @include('file')
@endsection

@section('content')
<div class="card">
    <div id="app">
        <vue-component></vue-component>
    </div>
</div>
@endsection

步骤2：在Vue入口文件中挂载多实例 #

打开resources/js/app.js，除了根实例#app，额外挂载外部容器的实例：

Vue3版本

import { createApp } from 'vue';
import ExampleVueComponent from './components/ExampleVueComponent.vue';
import VueComponent from './components/VueComponent.vue';

// 挂载根容器#app
const rootApp = createApp({
    components: { VueComponent }
});
rootApp.mount('#app');

// 挂载外部的toolbar-app容器
const toolbarApp = createApp({
    components: { ExampleVueComponent }
});
toolbarApp.mount('#toolbar-app');

Vue2版本

import Vue from 'vue';
import ExampleVueComponent from './components/ExampleVueComponent.vue';
import VueComponent from './components/VueComponent.vue';

// 根实例
new Vue({
    el: '#app',
    components: { VueComponent }
});

// 外部实例
new Vue({
    el: '#toolbar-app',
    components: { ExampleVueComponent }
});

方案2：使用Teleport（Vue3）/Portal（Vue2） #

如果外部组件需要和根实例共享状态（比如Vuex/Pinia），推荐使用Teleport（Vue3内置）或Portal（Vue2第三方插件），它可以把组件渲染到指定DOM节点，但组件依然属于根实例的一部分。

Vue3 用Teleport实现 #

步骤1：Blade模板添加目标容器

@section('toolbar-top')
<div class="card">
    <div id="toolbar-target"></div> <!-- 作为组件的渲染目标 -->
</div>
@endsection

步骤2：在Vue根组件中使用Teleport

<template>
  <div id="app">
    <vue-component></vue-component>
    
    <!-- 将组件 teleport到外部的toolbar-target节点 -->
    <teleport to="#toolbar-target">
      <example-vue-component></example-vue-component>
    </teleport>
  </div>
</template>

Vue2 用vue-portal插件实现 #

步骤1：安装插件

npm install vue-portal --save

步骤2：在入口文件注册插件

import Vue from 'vue';
import PortalVue from 'vue-portal';
Vue.use(PortalVue);

步骤3：Blade模板添加目标

@section('toolbar-top')
<div class="card">
    <portal-target name="toolbar-target"></portal-target>
</div>
@endsection

步骤4：在Vue组件中使用Portal

<template>
  <div id="app">
    <vue-component></vue-component>
    
    <portal to="toolbar-target">
      <example-vue-component></example-vue-component>
    </portal>
  </div>
</template>

方案选择建议 #

• 如果外部组件和根实例完全独立，不需要共享状态，选多实例挂载更简单。
• 如果需要共享状态、全局指令或插件，选Teleport/Portal更合适。

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