Vite

Add the ContentGraph plugin alongside your framework's plugins:

import { contentGraph } from "contentgraph/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [contentGraph()],
});

Server imports and types

Server modules import content from contentgraph:server. Include .contentgraph/**/*.d.ts in tsconfig.json for the generated collection types. The plugin rejects direct and transitive client imports of the server runtime.

Development updates

Vite watches source and configuration changes. Connect the browser-safe onContentUpdate() subscription from contentgraph:client to your framework's data refresh:

import { onContentUpdate } from "contentgraph:client";

const unsubscribe = onContentUpdate(async () => {
  await refreshPageData();
});

refreshPageData() stands for your router's refresh function. Register it in your framework's lifecycle hook, and unsubscribe on cleanup. The production subscription is a no-op.

See the framework guides for the server boundaries and refresh methods used by the examples.