3.20240714.0-6608bb3 • Published 11 months ago

@vue-vapor/server-renderer v3.20240714.0-6608bb3

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

@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
    }
  }
)
3.2024.0-1babaef

12 months ago

3.2024.0-63dbc26

12 months ago

3.2024.0-be6a2d1

12 months ago

3.2024.0-a1797f8

12 months ago

3.2024.0-5f3d8bf

12 months ago

3.2024.0-a38175e

12 months ago

3.2024.0-4be49b2

12 months ago

3.2024.0-44be768

12 months ago

3.2024.0-20b6594

12 months ago

3.2024.0-2eeb20d

12 months ago

3.2024.0-3ac951b

12 months ago

3.2024.0-80acfa5

12 months ago

3.2024.0-d451115

12 months ago

3.2024.0-4157597

12 months ago

3.2024.0-aa5fe96

12 months ago

3.2024.0-7d90c88

12 months ago

3.2024.0-1b51ce3

12 months ago

3.2024.0-e35fea2

12 months ago

3.2024.0-6e50bc6

12 months ago

3.2024.0-cf8be99

12 months ago

3.2024.0-bc04592

12 months ago

3.2024.0-4c28469

12 months ago

3.2024.0-cf642a7

12 months ago

3.2024.0-73791a6

12 months ago

3.2024.0-97f0b3b

12 months ago

3.2024.0-d9c0c29

12 months ago

3.2024.0-78e1cb7

12 months ago

3.2024.0-07444b3

12 months ago

3.2024.0-bbde386

12 months ago

3.2024.0-1febe5a

12 months ago

3.2024.0-9a38c1f

12 months ago

3.2024.0-d38e440

12 months ago

3.2024.0-aa68761

12 months ago

3.2024.0-9708a4a

12 months ago

3.2024.0-482970e

12 months ago

3.20240210.0

1 year ago

3.20240210.1

1 year ago

3.0.0-35f69d1

1 year ago

3.2024.1

1 year ago

3.2024.0

1 year ago

3.20240209.0

1 year ago

0.20240209.3

1 year ago

0.20240209.2

1 year ago

0.20240209.1

1 year ago

0.20240209.0

1 year ago