---
title: "Installation"
description: "Get started with Nuxt Content v3 in your Nuxt application."
canonical_url: "https://content.nuxt.com/docs/getting-started/installation"
---
# Installation

> Get started with Nuxt Content v3 in your Nuxt application.

## Install the Package

Choose your preferred package manager to install Nuxt Content v3:

<code-group>

```bash [pnpm]
pnpm add @nuxt/content
```

```bash [yarn]
yarn add @nuxt/content
```

```bash [npm]
npm install @nuxt/content
```

```bash [bun]
bun add @nuxt/content
```

</code-group>

## Register the Module

Add the Nuxt Content module to your `nuxt.config.ts`:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/content']
})
```

## Automatic Setup

When starting a new Nuxt project with the `create-nuxt` CLI, you can simply select `@nuxt/content` from the interactive module selector. This will automatically install and register the module for you.

<code-group>

```bash [npm]
npm create nuxt <project-name>
```

```bash [yarn]
yarn create nuxt <project-name>
```

```bash [pnpm]
pnpm create nuxt <project-name>
```

```bash [bun]
bun create nuxt <project-name>
```

```bash [deno]
deno -A npm:create-nuxt@latest <project-name>
```

</code-group>

<note color="warning">

When you run your project in Node.js, Nuxt Content will ask you about the database connector to use.
You can choose to install `better-sqlite3` or `sqlite3` package.

<br />

If you don't want to install any package, you can use native SQLite from Node.js@v22.5.0 or newer.
Checkout [`experimental.sqliteConnector`](https://content.nuxt.com/docs/getting-started/configuration#experimentalsqliteconnector) [configuration](https://content.nuxt.com/docs/getting-started/configuration#experimentalsqliteconnector).

</note>

<note color="warning">

If you use **pnpm v10+**, dependency build scripts are not executed by default.

<br />

Since `better-sqlite3` and `sqlite3` rely on a postinstall/build step to generate native bindings,
you may encounter errors such as:

<br />

`Could not locate the bindings file`

<br />

To resolve this, you can approve the required build scripts by running:

<code-group>

```bash [pnpm]
pnpm approve-builds
```

</code-group>

Alternatively, if you need a non-interactive setup (for example in CI),
you can explicitly allow native builds by adding the following configuration
to your project root `package.json`:

```json [package.json]
{
  "pnpm": {
    "onlyBuiltDependencies": [
      "better-sqlite3",
      "sqlite3"
    ]
  }
}
```

You may also need to clear your `node_modules` or explicitly build if
the initial install didn't do that:

<code-group>

```bash [pnpm]
pnpm rebuild better-sqlite3 sqlite3
```

</code-group>
</note>

## Create your First Collection

Create a `content.config.ts` file in your project root directory:

```ts [content.config.ts]
import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md'
    })
  }
})
```

This configuration creates a default `content` collection that processes all Markdown files located in the `content` folder of your project. You can customize the collection settings based on your needs.

<tip>

The `type: page` means there is a 1-to-1 relationship between content files and pages on your site.

</tip>

<note to="https://content.nuxt.com/docs/collections/define">

Learn more in our **Collections guide**.

</note>

## Create your First Markdown Page

Create a `content/index.md` file in your project root directory:

```md [content/index.md]
# My First Page

Here is some content.
```

Read more about writing [Markdown pages](https://content.nuxt.com/docs/files/markdown).

## Display your Page

Create a `pages/index.vue` file and display the page content:

```vue [pages/index.vue]
<script setup lang="ts">
const { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())

useSeoMeta({
  title: home.value?.title,
  description: home.value?.description
})
</script>

<template>
  <ContentRenderer v-if="home" :value="home" />
  <div v-else>Home not found</div>
</template>
```

<note icon="i-lucide-info">

If you are installing Nuxt Content in a new Nuxt project and you didn't have `pages` directory, you also need to update the `app.vue` file to allow rendering the pages by adding the `NuxtPage` component. (If you already have some pages in your project, you are good to go.)

```vue [app.vue]
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```

</note>

<tip icon="i-lucide-rocket">

That's it! You've now created your first Nuxt Content page.

</tip>


## Sitemap

See the full [sitemap](https://content.nuxt.com/sitemap.md) for all pages.