or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdinternal-helpers.mdnodejs-integration.mdstreaming-rendering.mdstring-rendering.mdweb-streams.md
tile.json

tessl/npm-vue--server-renderer

Server-side rendering library for Vue.js applications with support for streaming and multiple environments

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/server-renderer@3.5.x

To install, run

npx @tessl/cli install tessl/npm-vue--server-renderer@3.5.0

index.mddocs/

Vue Server Renderer

Vue Server Renderer provides server-side rendering (SSR) capabilities for Vue.js applications. It offers multiple rendering APIs including string-based rendering, streaming capabilities through various stream implementations, and specialized functions for different server environments including Node.js, serverless functions, and edge computing platforms like CloudFlare Workers.

Package Information

  • Package Name: @vue/server-renderer
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install @vue/server-renderer (or use vue/server-renderer as of Vue 3.2.13+)

Core Imports

import { renderToString, renderToWebStream, pipeToNodeWritable } from "@vue/server-renderer";

For CommonJS:

const { renderToString, renderToWebStream, pipeToNodeWritable } = require("@vue/server-renderer");

Recommended deep import (Vue 3.2.13+):

import { renderToString, renderToWebStream } from "vue/server-renderer";

Basic Usage

import { createSSRApp } from "vue";
import { renderToString } from "@vue/server-renderer";

// Create an SSR-ready Vue app
const app = createSSRApp({
  data: () => ({ message: "Hello from SSR!" }),
  template: `<div>{{ message }}</div>`,
});

// Render to HTML string
const html = await renderToString(app);
console.log(html); // "<div>Hello from SSR!</div>"

// With SSR context for teleports
const context = {};
const htmlWithContext = await renderToString(app, context);
console.log(context.teleports); // Any teleported content

Architecture

Vue Server Renderer is built around several key components:

  • Rendering Engine: Core logic for converting Vue components to HTML strings
  • Streaming System: Progressive rendering capabilities for better performance
  • Multi-Environment Support: Adapters for Node.js streams and Web Streams API
  • Teleport Handling: Management of content rendered outside normal component hierarchy
  • SSR Context: State management and data passing between server and client

Capabilities

String Rendering

Synchronous and asynchronous rendering of Vue applications to complete HTML strings, with support for SSR context and teleport handling.

function renderToString(
  input: App | VNode,
  context?: SSRContext
): Promise<string>;

interface SSRContext {
  [key: string]: any;
  teleports?: Record<string, string>;
}

String Rendering

Streaming Rendering

Progressive rendering capabilities for improved performance and user experience, supporting multiple stream implementations and environments.

function renderToSimpleStream<T extends SimpleReadable>(
  input: App | VNode,
  context: SSRContext,
  stream: T
): T;

interface SimpleReadable {
  push(chunk: string | null): void;
  destroy(err: any): void;
}

Streaming Rendering

Node.js Integration

Native Node.js stream integration for traditional server environments and frameworks.

function renderToNodeStream(
  input: App | VNode,
  context?: SSRContext
): Readable;

function pipeToNodeWritable(
  input: App | VNode,
  context?: SSRContext,
  writable: Writable
): void;

Node.js Integration

Web Streams Support

Modern Web Streams API support for serverless environments, edge computing, and modern web platforms.

function renderToWebStream(
  input: App | VNode,
  context?: SSRContext
): ReadableStream;

function pipeToWebWritable(
  input: App | VNode,
  context?: SSRContext,
  writable: WritableStream
): void;

Web Streams Support

Internal Runtime Helpers

Advanced compilation helpers and internal utilities for custom template compilation and specialized SSR scenarios.

function ssrRenderVNode(
  vnode: VNode,
  parentComponent?: ComponentInternalInstance | null,
  slotScopeId?: string
): SSRBuffer | Promise<SSRBuffer>;

function ssrInterpolate(value: unknown): string;

Internal Runtime Helpers

Types

type App = {
  _component: Component;
  _props: VNodeProps | null;
  _context: AppContext;
  provide(key: InjectionKey<any> | string, value: any): this;
};

type VNode = {
  type: VNodeTypes;
  props: VNodeProps | null;
  key: string | number | symbol | null;
  children: VNodeNormalizedChildren;
  component: ComponentInternalInstance | null;
  appContext: AppContext | null;
};

interface SSRContext {
  [key: string]: any;
  teleports?: Record<string, string>;
  __teleportBuffers?: Record<string, SSRBuffer>;
  __watcherHandles?: (() => void)[];
}

type SSRBuffer = SSRBufferItem[] & { hasAsync?: boolean };
type SSRBufferItem = string | SSRBuffer | Promise<SSRBuffer>;