---
title: Remix (Vite)
linkText: 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.

<Callout type="warn" title="Careful">
  The Remix adapter is compatible exclusively with Remix Vite.
</Callout>

## Installation

<div className="steps">
<div className="step">

Install required packages:

We have to install the following packages:

- `@content-collections/core`
- `@content-collections/remix-vite`

```package-install
npm i @content-collections/core @content-collections/remix-vite --save-dev
```

</div>
<div className="step">

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

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

</div>
<div className="step">

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

```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()],
});
```

</div>
</div>

## 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`.
