# vue-ssr-html-stream

> Transform stream to simplify Vue SSR streaming

Latest version **2.2.0** (published 2017-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-ssr-html-stream
pnpm add vue-ssr-html-stream
yarn add vue-ssr-html-stream
bun add vue-ssr-html-stream
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2017-03-18 |
| First published | 2017-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.0.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 39 |
| Author | Evan You |
| Maintainers | yyx990803 |
| Keywords | vue, ssr, stream |

## Links

- npm: https://www.npmjs.com/package/vue-ssr-html-stream
- Repository: https://github.com/vuejs/vue-ssr-html-stream
- Homepage: https://github.com/vuejs/vue-ssr-html-stream#readme
- Issues: https://github.com/vuejs/vue-ssr-html-stream/issues
- npm.io page: https://npm.io/package/vue-ssr-html-stream

## Dependencies (1)

- [serialize-javascript](https://npm.io/package/serialize-javascript.md) ^1.3.0

## Alternatives

- [byte-size](https://npm.io/package/byte-size.md) — 2.1M weekly downloads
- [speed-limiter](https://npm.io/package/speed-limiter.md) — 16.0K weekly downloads
- [@powersync/node](https://npm.io/package/@powersync/node.md) — 10.9K weekly downloads
- [@ledgerhq/coin-cardano](https://npm.io/package/@ledgerhq/coin-cardano.md) — 1.0K weekly downloads
- [@jayesol/jayeson.lib.streamfinder](https://npm.io/package/@jayesol/jayeson.lib.streamfinder.md) — 1.0K weekly downloads

## Recent versions

- 2.2.0 (latest) — 2017-03-18
- 2.1.0 — 2017-02-13
- 2.0.0 — 2017-02-13
- 1.1.0 — 2017-02-01
- 1.0.0 — 2017-02-01

## README

# vue-ssr-html-stream [![Build Status](https://circleci.com/gh/vuejs/vue-ssr-html-stream/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-ssr-html-stream/tree/master)

> **Note:** this package is used internally by vue-server-renderer >= 2.2.0 via the `template` option.

## Usage

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

const htmlStream = new HTMLStream({
  template, // string
  context, // ?Object
  outletPlaceholder // ?string, defaults to <!--vue-ssr-outlet-->
})

// 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 `<!--vue-ssr-outlet-->` - you can configure it with the `outletPlaceholder` 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](https://github.com/yahoo/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](https://github.com/declandewet/vue-meta):

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

### Example usage with Express

``` js
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)
})
```

---
_Source: https://npm.io/package/vue-ssr-html-stream · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._