Remix (Vite)

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.

Installation

1. Install required packages:

   We have to install the following packages:

   • @content-collections/core
   • @content-collections/remix-vite
   npmyarnpnpmbun

   pnpm add --save-dev @content-collections/core @content-collections/remix-vite
   

2. 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"]
       }
     }
   }
   

3. 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.