Server-Side Rendering API
renderToString()
Exported from
vue/server-renderer
Type
tsfunction renderToString( input: App | VNode, context?: SSRContext ): Promise<string>
Example
jsimport { createSSRApp } from 'vue' import { renderToString } from 'vue/server-renderer' const app = createSSRApp({ data: () => ({ msg: 'hello' }), template: `<div>{{ msg }}</div>` }) ;(async () => { const html = await renderToString(app) console.log(html) })()
SSR Context
You can pass an optional context object, which can be used to record additional data during the render, for example accessing content of Teleports:
jsconst ctx = {} const html = await renderToString(app, ctx) console.log(ctx.teleports) // { '#teleported': 'teleported content' }
Most other SSR APIs on this page also optionally accept a context object. The context object can be accessed in component code via the useSSRContext helper.
See also Guide - Server-Side Rendering
renderToNodeStream()
Renders input as a Node.js Readable stream.
Exported from
vue/server-renderer
Type
tsfunction renderToNodeStream( input: App | VNode, context?: SSRContext ): Readable
Example
js// 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. UsepipeToNodeWritable
instead.
pipeToNodeWritable()
Render and pipe to an existing Node.js Writable stream instance.
Exported from
vue/server-renderer
Type
tsfunction pipeToNodeWritable( input: App | VNode, context: SSRContext = {}, writable: Writable ): void
Example
js// inside a Node.js http handler pipeToNodeWritable(app, {}, res)
renderToWebStream()
Renders input as a Web ReadableStream.
Exported from
vue/server-renderer
Type
tsfunction renderToWebStream( input: App | VNode, context?: SSRContext ): ReadableStream
Example
js// 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.
Exported from
vue/server-renderer
Type
tsfunction pipeToWebWritable( input: App | VNode, context: SSRContext = {}, writable: WritableStream ): void
Example
This is typically used in combination with
TransformStream
:js// 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.
Exported from
vue/server-renderer
Type
tsfunction renderToSimpleStream( input: App | VNode, context: SSRContext, options: SimpleReadable ): SimpleReadable interface SimpleReadable { push(content: string | null): void destroy(err: any): void }
Example
jslet res = '' renderToSimpleStream( app, {}, { push(chunk) { if (chunk === null) { // done console(`render complete: ${res}`) } else { res += chunk } }, destroy(err) { // error encountered } } )
useSSRContext()
A runtime API used to retrieve the context object passed to renderToString()
or other server render APIs.
Type
tsfunction useSSRContext<T = Record<string, any>>(): T | undefined
Example
The retrieved context can be used to attach information that is needed for rendering the final HTML (e.g. head metadata).
vue<script setup> import { useSSRContext } from 'vue' // make sure to only call it during SSR // https://vitejs.dev/guide/ssr.html#conditional-logic if (import.meta.env.SSR) { const ctx = useSSRContext() // ...attach properties to the context } </script>
data-allow-mismatch
A special attribute that can be used to suppress hydration mismatch warnings.
Example
html<div data-allow-mismatch="text">{{ data.toLocaleString() }}</div>
The value can limit the allowed mismatch to a specific type. Allowed values are:
text
children
(only allows mismatch for direct children)class
style
attribute
If no value is provided, all types of mismatches will be allowed.