JSPM

vue-ssr-html-stream

1.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 118
  • Score
    100M100P100Q85589F
  • License MIT

Transform stream to simplify Vue SSR streaming

Package Exports

  • vue-ssr-html-stream

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-ssr-html-stream) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-ssr-html-stream

Transform stream to simplify Vue SSR streaming

Usage

const HTMLStream = require('vue-ssr-html-stream')

const htmlStream = new HTMLStream({
  template, // string
  context, // ?Object
  contentPlaceholder // ?string, defaults to <!-- APP -->
})

// pipe it
renderStream
  .pipe(htmlStream)
  .pipe(responseStream)
  • The template option is a string of the HTML page template. It must contain a special string which serves as the placeholder for your app's server-rendered content. The default placeholder string is <!-- APP --> - you can configure it with the contentPlaceholder option.

  • The context option should be the same context object passed to bundleRenderer.renderToStream(). The transform will check for a few special properties on the context when the source render stream starts emitting data:

    • context.head: any head markup that should be injected into the head of the page.

    • context.styles: any inline CSS that should be injected into the head of the page. Note that vue-loader 10.2.0+ (which uses vue-style-loader 2.0) will automatically populate this property with styles used in rendered components.

    • context.state: initial Vuex store state that should be inlined in the page as window.__INITIAL_STATE__. The inlined JSON is automatically sanitized with serialize-javascript.

beforeStart event

The stream emits a special event: beforeStart. An example use case would be generating context.head using info injected by vue-meta:

htmlStream.on('beforeStart', () => {
  const meta = context.meta.inject()
  context.head = meta.title.text()
})

Example usage with Express

const HTMLStream = require('vue-ssr-html-stream')
const template = require('fs').readFileSync('./index.html', 'utf-8')
const renderer = require('vue-server-renderer').createBundleRenderer(bundleCode)

app.get('*', (req, res) => {
  const context = { url: req.url }

  renderer.renderToStream(context)
    .on('error', err => {
      // handle render stream error before piping to the transform
    })
    .pipe(new HTMLStream({ context, template }))
    .pipe(res)
})