Vue Bundle Renderer

2.2.0 · active · verified Sun Apr 19

Vue Bundle Renderer provides robust server-side rendering (SSR) capabilities for Vue 3 applications, serving as a modern and optimized alternative to the legacy `vue-server-renderer` package. It is deeply integrated into the Nuxt.js ecosystem and is designed to work efficiently with modern JavaScript bundlers like Vite and Webpack. The current stable version is 2.2.0, with a relatively active release cadence, frequently publishing enhancements and fixes, as seen in recent updates for Vite manifest compatibility. Its primary function is to take a Vue application entry and a manifest file (from Vite or Webpack) to generate an HTML string on the server, ensuring proper asset injection and hydration markers for client-side Vue applications. Key differentiators include its focus on Vue 3's composition API, robust TypeScript support, and adaptability to contemporary build tools, offering a more streamlined SSR workflow compared to its predecessor.

Common errors

Warnings

Install

Imports

Quickstart

This example demonstrates the core usage of `vue-bundle-renderer` by creating a simple Vue 3 SSR application, initializing the renderer, and rendering the application to a complete HTML string. It highlights the `createRenderer` function and the concept of an SSR context, omitting bundler-generated manifest files for brevity.

import { createSSRApp } from 'vue';
import { createRenderer } from 'vue-bundle-renderer/runtime';

// 1. Define your Vue 3 SSR-friendly application
const createVueApp = () => createSSRApp({
  data: () => ({ message: 'Hello Vue SSR!' }),
  template: `
    <div>
      <h1>{{ message }}</h1>
      <p>This content was rendered on the server.</p>
      <button @click="console.log('Hydrated click!')">Click Me (Hydrates!)</button>
    </div>
  `,
});

async function renderApplication() {
  // 2. Initialize the renderer. In a production app, `renderOptions`
  // would typically include a bundle and manifest generated by Vite or Webpack.
  // For this basic example, we'll omit them to focus on core rendering.
  const renderer = createRenderer(createVueApp, {
    // bundle: { /* ... webpack or vite server bundle */ },
    // manifest: { /* ... webpack or vite client manifest */ }
  });

  // 3. Define an SSR context. This object can be used by the Vue app
  // to inject data (e.g., head tags, styles) into the HTML document.
  const ssrContext: { head?: string; scripts?: string } = {};

  // 4. Render the Vue application to an HTML string.
  const appHtml = await renderer.renderToString(ssrContext);

  // 5. Construct a complete HTML page with the rendered content.
  const fullHtml = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Bundle Renderer Example</title>
  ${ssrContext.head || ''} <!-- Injected head tags -->
</head>
<body>
  <div id="app">${appHtml}</div>
  ${ssrContext.scripts || ''} <!-- Injected scripts for hydration -->
  <script>
    // Basic client-side hydration for this example (in a real app, bundler handles this)
    import { createApp } from 'vue';
    const app = createApp({
      data: () => ({ message: 'Hello Vue SSR!' }),
      template: document.getElementById('app').innerHTML // Or load from bundle
    });
    // app.mount('#app'); // This would cause re-render, use hydrate with client bundle
  </script>
</body>
</html>
`;

  console.log(fullHtml);
}

renderApplication().catch(console.error);

view raw JSON →