Markdown

We can use vite-plugin-ssr with any Vite/Rollup markdown plugin.

Vue

For Vue, we can use vite-plugin-md.

Example:

React

For React and MDX v1 we can use vite-plugin-mdx.

For MDX v2 we can use @mdx-js/rollup.

Example:

<head> (pageContext.exports)

To set the <head> tags value of a markdown page, we can use Custom Export.

// some.page.md

export const documentProps = {
  title: 'A Markdown Page',
  description: 'Example of setting `<title>` and `<meta name="description">`'
}

# Markdown

This page is written in _Markdown_.
// _default.page.server.js

import { escapeInject } from 'vite-plugin-ssr/server'

export async function render(pageContext) {
  // `pageContext.exports` holds all exports of the page's `.page.js` file
  const { title, description } = pageContext.exports.documentProps
  return escapeInject`<html>
    <head>
      <title>${title}</title>
      <meta name="description" content="${description}">
    </head>
    <!-- ... -->
  </html>`
}

Examples:

<head> (frontmatter)

Some markdown processors also have support for a so-called frontmatter to define the page's metadata.

---
title: A Markdown Page
description: Example of setting `<title>` and `<meta name="description">`
---

# Markdown

This page is written in _Markdown_.

Make sure the Vite markdown plugin you are using has frontmatter support.

Markdown processors usually expose the frontmatter data as an export, which we can access at pageContext.exports.

// _default.page.server.js

import { escapeInject } from 'vite-plugin-ssr/server'

export async function render(pageContext) {
  // Read the documentation of your Vite markdown plugin or of its underlying markdown
  // processor to find the name of the export that holds the frontmatter data.
  const frontmatterExportName = 'nameOfTheFrontmatterExport'
  const frontmatter = pageContext.exports[frontmatterExportName]
  const { title, description } = frontmatter
  return escapeInject`<html>
    <head>
      <title>${title}</title>
      <meta name="description" content="${description}">
    </head>
    <!-- ... -->
  </html>`
}