如何在Laravel Blade中渲染Vue.js组件的真实内容？

算力阿峰

2026-5-25

嘿，我来帮你搞定这两个Laravel + Vue的常见问题，都是实际开发中经常遇到的场景：

1. 如何在Laravel Blade中渲染Vue.js组件内容

这是最基础的用法，分几步就能搞定：

第一步：注册Vue组件
在你的resources/js/app.js（或者自定义的入口文件）里，导入并注册Vue组件：

import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';

// 创建Vue实例并注册组件
const app = createApp({});
app.component('example-component', ExampleComponent);
// 挂载到页面上的指定容器（通常是id为app的div）
app.mount('#app');

第二步：在Blade模板中使用组件
在你的Blade视图文件里，先添加Vue的挂载容器，然后直接写组件标签：

<!-- Vue挂载容器，Vue会接管这个元素内部的内容 -->
<div id="app">
    <!-- 直接使用注册好的Vue组件标签 -->
    <example-component></example-component>
</div>

<!-- 引入编译后的Vue资源（Laravel 9+用Vite，旧版用Mix） -->
@vite('resources/js/app.js')
<!-- 旧版Laravel可使用：{{ mix('js/app.js') }} -->

页面加载完成后，Vue就会把<example-component>标签替换成组件的真实内容啦。

2. 让页面源码显示组件真实内容而非Vue标签

默认的客户端渲染模式下，浏览器先拿到的是带Vue组件标签的HTML，等Vue的JS加载完成后才会替换成真实内容，所以查看页面源码时看不到组件的实际内容。要解决这个问题，有几种可行的方案：

方案一：服务端渲染（SSR）

SSR会在服务器端先把Vue组件渲染成真实的HTML字符串，再发送给浏览器，这样页面源码里就能看到完整的组件内容，同时客户端的Vue会"激活"这些HTML，保持交互性。在Laravel里可以通过Vite实现：

安装依赖

npm install @vitejs/plugin-vue @vue/server-renderer

配置Vite
修改vite.config.js，添加SSR入口配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js', // 新增SSR入口文件
            refresh: true,
        }),
        vue(),
    ],
});

创建SSR入口文件
在resources/js/ssr.js里编写SSR的Vue实例逻辑：

import { createSSRApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';

export function createApp() {
    const app = createSSRApp({
        components: { ExampleComponent },
        template: `<example-component></example-component>`
    });
    return { app };
}

在Laravel控制器中渲染SSR内容

use Illuminate\Support\Facades\Vite;

public function index()
{
    // 调用Vite的ssr方法生成渲染后的HTML
    $ssrContent = Vite::ssr('resources/js/ssr.js');
    return view('welcome', ['ssrContent' => $ssrContent]);
}

在Blade模板中输出SSR内容
```
<div id="app">
    
    {!! $ssrContent !!}
</div>


@vite('resources/js/app.js')
```
注意：SSR需要你的服务器支持Node环境，因为要在服务端运行Vue代码。如果主机不支持Node，下面的方案更适合。

方案二：预渲染（适合静态页面）

如果你的页面是静态的（不需要动态数据），可以用预渲染工具在构建时生成包含组件真实内容的HTML文件，然后Laravel直接返回这些静态文件。比如用prerender-spa-plugin（需适配你的Vite版本），构建时会为每个路由生成对应的HTML文件，源码里自然就有真实内容了。

方案三：渐进式增强（简单高效）

如果你只是需要SEO友好或者让源码有内容，又不想折腾SSR/预渲染，可以用渐进式增强：先用Blade渲染静态的HTML内容，然后让Vue挂载到这个结构上，接管交互逻辑。比如：

<!-- Blade模板里先渲染静态内容 -->
<div id="app">
    <div class="user-card">
        <h2>{{ $user->name }}</h2>
        <p>{{ $user->email }}</p>
    </div>
</div>

<!-- Vue组件里复用这个结构，进行激活 -->
<template>
    <div class="user-card">
        <h2>{{ user.name }}</h2>
        <p>{{ user.email }}</p>
        <!-- 添加Vue的交互元素，比如编辑按钮 -->
        <button @click="editUser">编辑</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';
// 从Blade传递数据到Vue
const user = ref(@json($user));

function editUser() {
    // 交互逻辑
}
</script>

这种方式不需要额外的SSR配置，源码里有Blade渲染的真实内容，同时Vue可以增强页面的交互性，非常适合大多数场景。

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

如何在Laravel Blade中渲染Vue.js组件的真实内容？

方案一：服务端渲染（SSR） #

方案二：预渲染（适合静态页面） #

方案三：渐进式增强（简单高效） #

方案一：服务端渲染（SSR）

方案二：预渲染（适合静态页面）

方案三：渐进式增强（简单高效）