AsyncAPI
Build event-driven API documentations with Fumapress.
Installation
npm i @fumadocs/asyncapi shikiConfigure the plugin:
import { defineConfig } from "fumapress";
import { docs } from "./.source/server";
import path from "node:path";
import { createAsyncAPI } from "@fumadocs/asyncapi/server";
import { asyncapiPlugin } from "fumapress/plugins/asyncapi";
const asyncapi = createAsyncAPI({
// path or URL to your AsyncAPI spec
input: [path.resolve("./asyncapi.yaml")],
});
export default defineConfig({
content: {
docs: docs.toFumadocsSource(),
asyncapi: await asyncapi.staticSource(),
},
})
// fumapress plugin
.plugins(asyncapiPlugin({ server: asyncapi }));Update the path/URL to your AsyncAPI spec (e.g. ./asyncapi.yaml), the API pages will be automatically generated based on your spec.
Options
You can see Fumadocs AsyncAPI for details of advanced options.
asyncapi.staticSource()
It support a subset of options from generateFiles().
How to customize its output file structure?
It accepts a baseDir option. For example, the following will generate all API pages under the (asyncapi) folder:
import { defineConfig } from "fumapress";
import { docs } from "./.source/server";
export default defineConfig({
content: {
docs: docs.toFumadocsSource(),
asyncapi: await asyncapi.staticSource({
baseDir: "(asyncapi)",
}),
},
});Client UI
Create the renderer for API pages explicitly:
"use client";
import { createAsyncAPIPage } from "@fumadocs/asyncapi/ui";
export const AsyncAPIPage = createAsyncAPIPage();And import it from the AsyncAPI plugin:
import { AsyncAPIPage } from "./src/components/asyncapi";
export default defineConfig({
// ...
}).plugins(
asyncapiPlugin({
server: asyncapi,
ClientAPIPage: AsyncAPIPage,
}),
);Last updated on