Markdown

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

For example, for Vue, we can use vite-plugin-md. Example:

For React, we can use vite-plugin-mdx. Example:

<head>

To set the <head> tags value of a markdown page, we can simply export the values:

// markdown.page.mdx

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'

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

Examples:

We can also use a so-called front matter 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_.

The front matter data is usually exported, which we can access at pageContext.pageExports.

Edit this page