logoContent Collections

Remix

To integrate Content Collections into your Remix app, you can use the @content-collections/remix package. This package provides a vite plugin to generate the content collections at build time.

Careful

The Remix adapter is compatible exclusively with Remix Vite.

Installation

Install required packages:

We have to install the following packages:

  • @content-collections/core
  • @content-collections/remix-vite
npm i @content-collections/core @content-collections/remix-vite --save-dev

After installation we have to add a path alias for the generated collections to the tsconfig.json:

{
  "compilerOptions": {
    // ...
    "paths": {
      "~/*": ["./app/*"],
      "content-collections": ["./.content-collections/generated"]
    }
  }
}

Add the Content Collections plugin to the Vite config (vite.config.ts):

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import contentCollections from "@content-collections/vite";
 
export default defineConfig({
  plugins: [remix(), tsconfigPaths(), contentCollections()],
});

API

The package exports a single function as the default export. The function takes a single argument, an object with the following properties:

configPath (optional)

Specifies the path to the Content Collections configuration file. Defaults to content-collections.ts.

Previous

Next.js

Next

Solid Start

On this page

InstallationAPIconfigPath (optional)