|
# @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 |
|
} |
|
} |
|
) |
|
``` |
|
|