@vue-vapor/server-renderer NPM

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

vue

@vue/shared @vue/compiler-ssr

3 hours ago

11 hours ago

16 hours ago

19 hours ago

16 hours ago

18 hours ago

15 hours ago

11 hours ago

11 hours ago

16 hours ago

18 hours ago

2 days ago

2 days ago

2 days ago

19 hours ago

19 hours ago

2 days ago

20 hours ago

2 days ago

2 days ago

2 days ago

2 days ago

2 days ago

3 days ago

3 days ago

4 days ago

4 days ago

4 days ago

4 days ago

5 days ago

5 days ago

5 days ago

5 days ago

5 days ago

9 days ago

11 days ago

11 days ago

11 days ago

11 days ago

11 days ago

12 days ago

12 days ago

12 days ago

13 days ago

12 days ago

13 days ago

12 days ago

13 days ago

12 days ago

13 days ago

13 days ago

14 days ago

14 days ago

14 days ago

15 days ago

15 days ago

15 days ago

15 days ago

15 days ago

15 days ago

15 days ago

15 days ago

15 days ago

15 days ago

15 days ago

15 days ago

15 days ago

15 days ago

15 days ago

17 days ago

16 days ago

17 days ago

16 days ago

16 days ago

16 days ago

17 days ago

18 days ago

19 days ago

19 days ago

18 days ago

19 days ago

20 days ago

21 days ago

22 days ago

23 days ago

22 days ago

23 days ago

23 days ago

23 days ago

23 days ago

22 days ago

22 days ago

23 days ago

24 days ago

24 days ago

24 days ago

23 days ago

23 days ago

25 days ago

25 days ago

25 days ago

25 days ago

26 days ago

25 days ago

27 days ago

27 days ago

27 days ago

28 days ago

28 days ago

28 days ago

29 days ago

29 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago