Fuma Content
Framework integration

Vite

Setup Fuma Content on Vite

Installation

npm i fuma-content

Update your Vite config:

vite.config.ts
import { defineConfig } from "vite";
import tsConfigPaths from "vite-tsconfig-paths";
import content from "fuma-content/vite";

export default defineConfig({
  plugins: [
    content(await import("./content.config")),
    // recommended
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
  ],
});

Create a config file to define collections:

content.config.ts (Example)
import { defineConfig } from "fuma-content/config";
import { mdxCollection } from "fuma-content/collections/mdx";

const docs = mdxCollection({
  dir: "content/docs",
});

export default defineConfig({
  collections: { docs },
});

Each collection generates its files in the .content folder, it's recommended to add a path alias:

tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "content/*": ["./.content/*"]
    }
  }
}

Fuma Content is now configured, start the dev server (vite dev) to see the generated types.

Usage

You can access the collections, such as the MDX collection you defined:

import { docs } from "content/docs";

console.log(docs.list());

Learn More

See below for usage of built-in collections:

On this page