Integração com Vite

Use o @unifast/vite para compilar arquivos Markdown e MDX em build time e importá-los diretamente em sua aplicação Vite.

O @unifast/vite fornece um plugin Vite que compila arquivos Markdown e MDX em build time. Importe arquivos .md e .mdx diretamente em sua aplicação.

Instalação

Configuração

Adicione o plugin à sua configuração do Vite:

// vite.config.ts
import { defineConfig } from "vite";
import unifast from "@unifast/vite";

export default defineConfig({
  plugins: [
    unifast({
      // Optional: pass compile options
      plugins: [],
    }),
  ],
});

Importando Markdown

Uma vez configurado, importe arquivos .md diretamente:

import content from "./docs/getting-started.md";

console.log(content.html);         // Compiled HTML string
console.log(content.frontmatter);  // Parsed frontmatter
console.log(content.toc);          // Table of contents

O módulo importado fornece:

PropriedadeTipoDescrição
htmlstringSaída HTML compilada
frontmatterRecord<string, unknown>Metadados de frontmatter parseados
tocTocEntry[]Table of contents extraída

Com Plugins

Passe plugins através das opções do plugin Vite:

// vite.config.ts
import { defineConfig } from "vite";
import unifast from "@unifast/vite";
import { frontmatter, gfm, syntect } from "@unifast/node";

export default defineConfig({
  plugins: [
    unifast({
      plugins: [frontmatter(), gfm(), syntect()],
    }),
  ],
});

Todos os imports de Markdown/MDX em seu projeto usarão esses plugins automaticamente.

Suporte a MDX

Arquivos MDX são compilados para módulos JavaScript com um export padrão de componente React:

import Content from "./article.mdx";

function Page() {
  return <Content components={{ h1: MyHeading }} />;
}

Hot Module Replacement

O plugin Vite suporta HMR. Quando você edita um arquivo .md ou .mdx, a página atualiza sem um reload completo.

Veja Também