| # @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** | |
| ```ts | |
| function renderToString( | |
| input: App | VNode, | |
| context?: SSRContext | |
| ): Promise<string> | |
| ``` | |
| **Usage** | |
| ```js | |
| 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: | |
| ```js | |
| 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](https://nodejs.org/api/stream.html#stream_class_stream_readable). | |
| **Signature** | |
| ```ts | |
| function renderToNodeStream(input: App | VNode, context?: SSRContext): Readable | |
| ``` | |
| **Usage** | |
| ```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. Use `pipeToNodeWritable` instead. | |
| ### `pipeToNodeWritable` | |
| Render and pipe to an existing [Node.js Writable stream](https://nodejs.org/api/stream.html#stream_writable_streams) instance. | |
| **Signature** | |
| ```ts | |
| function pipeToNodeWritable( | |
| input: App | VNode, | |
| context: SSRContext = {}, | |
| writable: Writable | |
| ): void | |
| ``` | |
| **Usage** | |
| ```js | |
| // inside a Node.js http handler | |
| pipeToNodeWritable(app, {}, res) | |
| ``` | |
| ### `renderToWebStream` | |
| Renders input as a [Web ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API). | |
| **Signature** | |
| ```ts | |
| function renderToWebStream( | |
| input: App | VNode, | |
| context?: SSRContext | |
| ): ReadableStream | |
| ``` | |
| **Usage** | |
| ```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](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream) instance. | |
| **Signature** | |
| ```ts | |
| function pipeToWebWritable( | |
| input: App | VNode, | |
| context: SSRContext = {}, | |
| writable: WritableStream | |
| ): void | |
| ``` | |
| **Usage** | |
| This is typically used in combination with [`TransformStream`](https://developer.mozilla.org/en-US/docs/Web/API/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. | |
| **Signature** | |
| ```ts | |
| function renderToSimpleStream( | |
| input: App | VNode, | |
| context: SSRContext, | |
| options: SimpleReadable | |
| ): SimpleReadable | |
| interface SimpleReadable { | |
| push(content: string | null): void | |
| destroy(err: any): void | |
| } | |
| ``` | |
| **Usage** | |
| ```js | |
| let res = '' | |
| renderToSimpleStream( | |
| app, | |
| {}, | |
| { | |
| push(chunk) { | |
| if (chunk === null) { | |
| // done | |
| console(`render complete: ${res}`) | |
| } else { | |
| res += chunk | |
| } | |
| }, | |
| destroy(err) { | |
| // error encountered | |
| } | |
| } | |
| ) | |
| ``` | |