@vue/server-renderer

@vue/server-renderer

Note: as of 3.2.13+, this package is included as a dependency of the main vue package and can be accessed as vue/server-renderer. This means you no longer need to explicitly install this package and ensure its version match that of vue's. Just use the vue/server-renderer deep import instead.

Basic API

renderToString

Signature

function renderToString(
  input: App | VNode,
  context?: SSRContext,
): Promise<string>

Usage

const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')

const app = createSSRApp({
  data: () => ({ msg: 'hello' }),
  template: `<div>{{ msg }}</div>`,
})

;(async () => {
  const html = await renderToString(app)
  console.log(html)
})()

Handling Teleports

If the rendered app contains teleports, the teleported content will not be part of the rendered string. Instead, they are exposed under the teleports property of the ssr context object:

const ctx = {}
const html = await renderToString(app, ctx)

console.log(ctx.teleports) // { '#teleported': 'teleported content' }

Streaming API

renderToNodeStream

Renders input as a Node.js Readable stream.

Signature

function renderToNodeStream(input: App | VNode, context?: SSRContext): Readable

Usage

// inside a Node.js http handler
renderToNodeStream(app).pipe(res)

Note: This method is not supported in the ESM build of @vue/server-renderer, which is decoupled from Node.js environments. Use pipeToNodeWritable instead.

pipeToNodeWritable

Render and pipe to an existing Node.js Writable stream instance.

Signature

function pipeToNodeWritable(
  input: App | VNode,
  context: SSRContext = {},
  writable: Writable,
): void

Usage

// inside a Node.js http handler
pipeToNodeWritable(app, {}, res)

renderToWebStream

Renders input as a Web ReadableStream.

Signature

function renderToWebStream(
  input: App | VNode,
  context?: SSRContext,
): ReadableStream

Usage

// inside an environment with ReadableStream support
return new Response(renderToWebStream(app))

Note: in environments that do not expose ReadableStream constructor in the global scope, pipeToWebWritable should be used instead.

pipeToWebWritable

Render and pipe to an existing Web WritableStream instance.

Signature

function pipeToWebWritable(
  input: App | VNode,
  context: SSRContext = {},
  writable: WritableStream,
): void

Usage

This is typically used in combination with TransformStream:

// TransformStream is available in environments such as CloudFlare workers.
// in Node.js, TransformStream needs to be explicitly imported from 'stream/web'
const { readable, writable } = new TransformStream()
pipeToWebWritable(app, {}, writable)

return new Response(readable)

renderToSimpleStream

Renders input in streaming mode using a simple readable interface.

Signature

function renderToSimpleStream(
  input: App | VNode,
  context: SSRContext,
  options: SimpleReadable,
): SimpleReadable

interface SimpleReadable {
  push(content: string | null): void
  destroy(err: any): void
}

Usage

let res = ''

renderToSimpleStream(
  app,
  {},
  {
    push(chunk) {
      if (chunk === null) {
        // done
        console(`render complete: ${res}`)
      } else {
        res += chunk
      }
    },
    destroy(err) {
      // error encountered
    },
  },
)

Changelog

3.5.22 (2025-09-25)

Bug Fixes

• compiler-core: identifiers in switch-case should not be inferred as references (#13923) (5953c9f)
• compiler-dom: nodes with v-once shouldn't be stringified (#13878) (95c1975)
• compiler-sfc: add support for @vue-ignore in runtime type resolution (#13906) (ba7f7f9)
• compiler-sfc: enhance inferRuntimeType to support TSMappedType with indexed access (#13848) (e388f1a), closes #13847
• compiler-sfc: ensure css custom properties do not start with a digit (#13870) (9c27951)
• compiler-sfc: ensure props bindings register before compiling template (#13922) (abd5638), closes #13920
• compiler-ssr: ensure v-show has a higher priority in SSR (#12171) (836b829), closes #12162
• custom-element: properly mount multiple Teleports in custom element component w/ shadowRoot false (#13900) (5e1e791), closes #13899
• custom-element: set prop runs pending mutations before disconnect (#13897) (c4a88cd), closes #13315
• custom-element: use PatchFlags.BAIL for slot when props are present (#13907) (5358bca), closes #13904
• reactivity: respect readonly during ref unwrapping (#13905) (aba7fed), closes #13903
• reactivity: update iterator to check for completion instead of value presence (#13761) (2078f8b)
• runtime-core: simplify block-tracking disabling in h helper (#13841) (75220c7)
• transition-group: run forceReflow on the correct document (fix #13849) (#13853) (1be5ddf)
• types: more precise types for Events and added missing definitions (#9675) (8bb8fb2)
• types: set dom stub type to never instead of {} (#13915) (8620a61), closes #11564
• types: widen directive arg type from string to any (#13758) (4b71706), closes #13757

Features

• custom-element: allow specifying additional options for shadowRoot in custom elements (#12965) (47e628d), closes #12964

Reverts

• Revert "fix(hmr): prevent VUE_HMR_RUNTIME from being overwritten by vue runtime in 3rd-party libraries" (#13925) (6b68f72), closes #13925