API отрисовки на стороне сервера ​

renderToString() ​

• Экспортируется из vue/server-renderer

• Тип

  ts

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

• Пример

  js

  import { createSSRApp } from 'vue' import { renderToString } from 'vue/server-renderer'  const app = createSSRApp({  data: () => ({ msg: 'привет' }),  template: `<div>{{ msg }}</div>` })  ;(async () => {  const html = await renderToString(app)  console.log(html) })()

  Контекст SSR ​

  Вы можете передать необязательный объект контекста, который может быть использован для записи дополнительных данных во время отрисовки, например доступ к содержимому телепортов:

  js

  const ctx = {} const html = await renderToString(app, ctx)  console.log(ctx.teleports) // { '#teleported': 'контент телепорта' }

  Большинство других SSR API, представленных на этой странице, также опционально принимают объект контекста. Доступ к объекту контекста можно получить в коде компонента с помощью помощника useSSRContext.

• См. также Руководство — Отрисовка на стороне сервера

renderToNodeStream() ​

Выводит входные данные в виде Node.js Readable stream.

• Экспортируется из vue/server-renderer

• Тип

  ts

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

• Пример

  js

  // внутри http-обработчика Node.js renderToNodeStream(app).pipe(res)

  Примечание

  Этот метод не поддерживается в ESM-сборке vue/server-renderer, которая отвязана от окружения Node.js. Вместо него используйте pipeToNodeWritable.

pipeToNodeWritable() ​

Отрисовка и передача данных в существующий экземпляр Node.js Writable stream.

• Экспортируется из vue/server-renderer

• Тип

  ts

  function pipeToNodeWritable(  input: App | VNode,  context: SSRContext = {},  writable: Writable ): void

• Пример

  js

  // внутри http-обработчика Node.js pipeToNodeWritable(app, {}, res)

renderToWebStream() ​

Передает входные данные в виде Web ReadableStream.

• Экспортируется из vue/server-renderer

• Тип

  ts

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

• Пример

  js

  // внутри среды с поддержкой ReadableStream return new Response(renderToWebStream(app))

  Примечание

  В окружениях, не предоставляющих конструктор ReadableStream в глобальной области видимости, вместо него следует использовать pipeToWebWritable().

pipeToWebWritable() ​

Отрисовка и передача данных в существующий экземпляр Web WritableStream.

• Экспортируется из vue/server-renderer

• Тип

  ts

  function pipeToWebWritable(  input: App | VNode,  context: SSRContext = {},  writable: WritableStream ): void

• Пример

  Обычно используется в сочетании с TransformStream:

  js

  // TransformStream доступен в таких средах, как CloudFlare workers. // в Node.js TransformStream должен быть явно импортирован из 'stream/web' const { readable, writable } = new TransformStream() pipeToWebWritable(app, {}, writable)  return new Response(readable)

renderToSimpleStream() ​

Осуществляет отрисовку входных данных в потоковом режиме с использованием простого readable интерфейса.

• Экспортируется из vue/server-renderer

• Тип

  ts

  function renderToSimpleStream(  input: App | VNode,  context: SSRContext,  options: SimpleReadable ): SimpleReadable  interface SimpleReadable {  push(content: string | null): void  destroy(err: any): void }

• Пример

  js

  let res = ''  renderToSimpleStream(  app,  {},  {  push(chunk) {  if (chunk === null) {  // готово  console(`отрисовка завершена: ${res}`)  } else {  res += chunk  }  },  destroy(err) {  // возникла ошибка  }  } )

useSSRContext() ​

Runtime API, используемый для получения объекта контекста, передаваемого в renderToString() или другие серверные API отрисовки.

• Тип

  ts

  function useSSRContext<T = Record<string, any>>(): T | undefined

• Пример

  Извлеченный контекст может быть использован для присоединения информации, необходимой для рендеринга конечного HTML (например, метаданных head).

  vue

  <script setup> import { useSSRContext } from 'vue'  // убедитесь, что вызывается только во время SSR // https://vitejs.dev/guide/ssr#conditional-logic if (import.meta.env.SSR) {  const ctx = useSSRContext()  // ...прикрепление свойства к контексту } </script>

data-allow-mismatch ​

A special attribute that can be used to suppress hydration mismatch warnings.

• Example

  html

  <div data-allow-mismatch="text">{{ data.toLocaleString() }}</div>

  The value can limit the allowed mismatch to a specific type. Allowed values are:

  • text
  • children (only allows mismatch for direct children)
  • class
  • style
  • attribute

  If no value is provided, all types of mismatches will be allowed.