### Install Dependencies and Start Development Server

Source: https://content.nuxt.com/templates/docus

Install project dependencies and start the local development server. Your documentation site will be accessible at http://localhost:3000.

```bash
npm install

npm run dev

```

--------------------------------

### Install LibSQL Client

Source: https://content.nuxt.com/docs/getting-started/configuration

Installs the necessary `@libsql/client` package for the LibSQL database adapter.

```bash
npm i @libsql/client

```

--------------------------------

### Install PGlite Client

Source: https://content.nuxt.com/docs/getting-started/configuration

Installs the necessary `@electric-sql/pglite` package for the PGlite database adapter.

```bash
npm i @electric-sql/pglite

```

--------------------------------

### Install Valibot

Source: https://content.nuxt.com/docs/collections/validators

Install Valibot and its JSON Schema adapter for schema definition.

```bash
pnpm add -D valibot @valibot/to-json-schema
# or
npm i -D valibot @valibot/to-json-schema
```

--------------------------------

### Install Nuxt Studio Module

Source: https://content.nuxt.com/blog/studio-oss

Install the Nuxt Studio module using the Nuxt CLI. This is the first step for setting up the module.

```bash
npx nuxt module add nuxt-studio

```

--------------------------------

### Install Nuxt Studio

Source: https://content.nuxt.com/blog/studio-module-alpha

Install the Nuxt Studio module using npx. Ensure you have configured your GitHub OAuth app.

```bash
npx nuxi module add nuxt-studio@alpha

```

--------------------------------

### Basic useSearchCollection Setup

Source: https://content.nuxt.com/docs/utils/use-search-collection

Demonstrates the basic setup for using useSearchCollection to search a single collection. It watches a query ref and updates results when the query changes.

```vue
<script setup lang="ts">
const { status, search } = useSearchCollection('docs')

const query = ref('')
const results = ref([])

watch(query, async (value) => {
  results.value = value ? await search(value) : []
})
</script>

```

--------------------------------

### Start Nuxt Development Server

Source: https://content.nuxt.com/docs/advanced/tools

Run this command in your terminal to start the Nuxt development server. This is often necessary to generate the SQLite database file if it's missing.

```bash
npx nuxi dev

```

--------------------------------

### Install PostgreSQL Driver

Source: https://content.nuxt.com/docs/getting-started/configuration

Installs the necessary `pg` package for the PostgreSQL database adapter.

```bash
npm i pg

```

--------------------------------

### Install Nuxt LLMs Module

Source: https://content.nuxt.com/docs/integrations/llms

Install the nuxt-llms module using npm.

```bash
npm install nuxt-llms

```

--------------------------------

### Initialize Docus Project

Source: https://content.nuxt.com/blog/docus-v3

Use this command to quickly set up a new Docus documentation project. After running, you can start adding your Markdown files to the `content/` folder.

```bash
npx docus init docs
```

--------------------------------

### Install Nuxt i18n Module

Source: https://content.nuxt.com/docs/integrations/i18n

Install the @nuxtjs/i18n module using npm.

```bash
npm install @nuxtjs/i18n

```

--------------------------------

### Fetch Document by Path (API Example)

Source: https://content.nuxt.com/docs/utils/query-collection

An API-level example demonstrating how to use queryCollection with the path method to retrieve a single document.

```javascript
const route = useRoute()
const { data } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})

```

--------------------------------

### Install Nuxt Content with bun

Source: https://content.nuxt.com/docs/getting-started/installation

Use this command to add the Nuxt Content package to your project using bun.

```bash
bun add @nuxt/content

```

--------------------------------

### Install Zod v3

Source: https://content.nuxt.com/docs/collections/validators

Install Zod and zod-to-json-schema for schema definition. Prefer importing `z` directly from `zod`.

```bash
pnpm add -D zod zod-to-json-schema
# or
npm i -D zod zod-to-json-schema
```

--------------------------------

### Layout with UI Pro v1 Components

Source: https://content.nuxt.com/blog/ui-pro-docs-migration

Example demonstrating the older layout structure using UAside and UNavigationTree components.

```vue
<template>
  <UContainer>
    <UPage>
      <template #left>
        <UAside>
          <UNavigationTree :links="mapContentNavigation(navigation)" />
        </UAside>
      </template>

      <slot />
    </UPage>
  </UContainer>
</template>

```

--------------------------------

### Fetch and Display Documents (Client-Side)

Source: https://content.nuxt.com/docs/utils/query-collection

A complete client-side example demonstrating fetching a list of documents with ordering and selecting specific fields.

```vue
<script setup lang="ts">
const { data: docs } = await useAsyncData('documents-list', () => {
  return queryCollection('docs')
    .order('date', 'DESC')
    .select('title', 'path', 'description')
    .all()
})
</script>

<template>
  <NuxtLink v-for="doc in docs" :key="doc.path" :to="doc.path">
    <h2>{{ doc.title }}</h2>
    <p>{{ doc.description }}</p>
  </NuxtLink>
</template>
```

--------------------------------

### Create Nuxt Project with Content Module (bun)

Source: https://content.nuxt.com/docs/getting-started/installation

Use bun to create a new Nuxt project and select Nuxt Content from the module selector for automatic setup.

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

```

--------------------------------

### Install Nuxt Content with npm

Source: https://content.nuxt.com/docs/getting-started/installation

Use this command to add the Nuxt Content package to your project using npm.

```bash
npm install @nuxt/content

```

--------------------------------

### Install Zod v4

Source: https://content.nuxt.com/docs/collections/validators

Install Zod v4, which provides a native JSON Schema export, eliminating the need for `zod-to-json-schema`.

```bash
pnpm add -D zod
# or
npm i -D zod
```

--------------------------------

### Create Nuxt Project with Content Module (deno)

Source: https://content.nuxt.com/docs/getting-started/installation

Use deno to create a new Nuxt project and select Nuxt Content from the module selector for automatic setup.

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

```

--------------------------------

### Layout with UI Pro v3 Components

Source: https://content.nuxt.com/blog/ui-pro-docs-migration

Example of using the updated UPageAside and UContentNavigation components for layout structure.

```vue
<template>
  <UContainer>
    <UPage>
      <template #left>
        <UPageAside>
          <UContentNavigation
            highlight
            :navigation="navigation"
          />
        </UPageAside>
      </template>

      <slot />
    </UPage>
  </UContainer>
</template>

```

--------------------------------

### Add Nuxt Content v3 Package

Source: https://content.nuxt.com/blog/ui-pro-docs-migration

Install the latest version of the Nuxt Content package.

```bash
pnpm add @nuxt/content@^3

```

```bash
yarn add @nuxt/content@^3

```

```bash
npm install @nuxt/content@^3

```

```bash
bun add @nuxt/content@^3

```

--------------------------------

### Configure LibSQL Database Adapter

Source: https://content.nuxt.com/docs/getting-started/configuration

Sets up the LibSQL database adapter, commonly used with Turso. Requires the `@libsql/client` package to be installed and database credentials provided via environment variables.

```typescript
export default defineNuxtConfig({
  content: {
    database: {
      type: 'libsql',
      url: process.env.TURSO_DATABASE_URL,
      authToken: process.env.TURSO_AUTH_TOKEN,
    }
  }
})
```

--------------------------------

### Install Nuxt UI Pro v3 Alpha

Source: https://content.nuxt.com/blog/ui-pro-docs-migration

Install the Nuxt UI Pro v3 alpha package using your preferred package manager. This is the first step in migrating to Nuxt UI Pro v3.

```bash
pnpm add @nuxt/ui-pro@next
```

```bash
yarn add @nuxt/ui-pro@next
```

```bash
npm install @nuxt/ui-pro@next
```

```bash
bun add @nuxt/ui-pro@next
```

--------------------------------

### Install Nuxt Content with pnpm

Source: https://content.nuxt.com/docs/getting-started/installation

Use this command to add the Nuxt Content package to your project using pnpm.

```bash
pnpm add @nuxt/content

```

--------------------------------

### Install Nuxt Content with yarn

Source: https://content.nuxt.com/docs/getting-started/installation

Use this command to add the Nuxt Content package to your project using yarn.

```bash
yarn add @nuxt/content

```

--------------------------------

### Create Nuxt Project with Content Module (npm)

Source: https://content.nuxt.com/docs/getting-started/installation

Use npm to create a new Nuxt project and select Nuxt Content from the module selector for automatic setup.

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

```

--------------------------------

### Install NuxtHub Module

Source: https://content.nuxt.com/docs/deploy/nuxthub

Use this command to add the NuxtHub module to your project. This integrates Nuxt Content with NuxtHub for deployment.

```bash
npx nuxi module add hub

```

--------------------------------

### Landing page structure with v1 components

Source: https://content.nuxt.com/blog/ui-pro-docs-migration

Example of a v1 landing page using `ULandingHero`, `ULandingSection`, and `ULandingCard` components.

```vue
<template>
  <div>
    <ULandingHero
      v-if="page.hero"
      v-bind="page.hero"
    >
      <template #headline>
        <UBadge
          v-if="page.hero.headline"
          variant="subtle"
          size="lg"
          class="relative rounded-full font-semibold"
        >
          <NuxtLink
            :to="page.hero.headline.to"
            target="_blank"
            class="focus:outline-none"
            tabindex="-1"
          >
            <span
              class="absolute inset-0"
              aria-hidden="true"
            />
          </NuxtLink>

          {{ page.hero.headline.label }}

          <UIcon
            v-if="page.hero.headline.icon"
            :name="page.hero.headline.icon"
            class="ml-1 w-4 h-4 pointer-events-none"
          />
        </UBadge>
      </template>

      <template #title>
        <MDC cache-key="head-title" :value="page.hero.title" />
      </template>

      <MDC
        :value="page.hero.code"
        cache-key="head-code"
        class="prose prose-primary dark:prose-invert mx-auto"
      />
    </ULandingHero>

    <ULandingSection
      :title="page.features.title"
      :links="page.features.links"
    >
      <UPageGrid>
        <ULandingCard
          v-for="(item, index) of page.features.items"
          :key="index"
          v-bind="item"
        />
      </UPageGrid>
    </ULandingSection>
  </div>
</template>

```

--------------------------------

### Add AI Assistant to Docus Site

Source: https://content.nuxt.com/blog/ai-assistant

Install the AI Assistant for Docus sites using the provided command.

```bash
npx skills add nuxt-content/docus

```

--------------------------------

### Create Nuxt Project with Content Module (yarn)

Source: https://content.nuxt.com/docs/getting-started/installation

Use yarn to create a new Nuxt project and select Nuxt Content from the module selector for automatic setup.

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

```

--------------------------------

### Configure PGlite Database Adapter

Source: https://content.nuxt.com/docs/getting-started/configuration

Configures the PGlite database adapter, recommended for development. Requires the `@electric-sql/pglite` package to be installed.

```typescript
export default defineNuxtConfig({
  content: {
    database: {
      type: 'pglite',
      dataDir: '.data/content/pglite'
    }
  }
})
```

--------------------------------

### Run Nuxt Node Server

Source: https://content.nuxt.com/docs/deploy/server

Execute the built Nuxt application using Node.js. This command starts the server, typically listening on http://localhost:3000.

```bash
$ node .output/server/index.mjs
Listening on http://localhost:3000

```

--------------------------------

### Create Nuxt Project with Content Module (pnpm)

Source: https://content.nuxt.com/docs/getting-started/installation

Use pnpm to create a new Nuxt project and select Nuxt Content from the module selector for automatic setup.

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

```

--------------------------------

### Configure Content Collections

Source: https://content.nuxt.com/blog/ui-pro-docs-migration

Define content collections and their schemas using `content.config.ts`. This example sets up 'landing' and 'docs' collections with custom fields.

```typescript
import { defineContentConfig, defineCollection, z } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    landing: defineCollection({
      type: 'page',
      source: 'index.yml'
    }),
    docs: defineCollection({
      type: 'page',
      source: {
        include: '**',
        exclude: ['index.yml']
      },
      schema: z.object({
        links: z.array(z.object({
          label: z.string(),
          icon: z.string(),
          to: z.string(),
          target: z.string().optional()
        })).optional()
      })
    })
  }
})

```

--------------------------------

### Query All Items from a Collection

Source: https://content.nuxt.com/docs/collections/define

Fetch all items from a collection using the `queryCollection` utility. This example demonstrates fetching all blog posts.

```vue
<script setup lang="ts">
const { data: posts } = await useAsyncData('blog', () => queryCollection('blog').all())
</script>

<template>
  <div>
    <h1>Blog</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <NuxtLink :to="post.path">{{ post.title }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>
```

--------------------------------

### Configure Rehype Plugins

Source: https://content.nuxt.com/docs/getting-started/configuration

Add rehype plugins to customize HTML rendering. This example adds the `rehype-figure` plugin.

```typescript
export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        // Object syntax can be used to override default options
        rehypePlugins: {
          'rehype-figure': {

          }
        },
      }
    }
  }
})
```

--------------------------------

### Configure Native SQLite Connector

Source: https://content.nuxt.com/docs/getting-started/configuration

Example of configuring Nuxt Content to use the 'native' SQLite connector, which works in most Node environments.

```typescript
export default defineNuxtConfig({
  content: {
    experimental: { sqliteConnector: 'native' },
  },
});

```

--------------------------------

### Rebuild Native Dependencies with pnpm

Source: https://content.nuxt.com/docs/getting-started/installation

Manually rebuild native dependencies like better-sqlite3 and sqlite3 with pnpm if the initial install did not complete correctly.

```bash
pnpm rebuild better-sqlite3 sqlite3

```

--------------------------------

### Basic Query Collection Navigation with Conditions

Source: https://content.nuxt.com/docs/utils/query-collection-navigation

An example demonstrating the use of queryCollectionNavigation with a simple 'published' filter and ordering by 'date' in descending order.

```vue
<script setup lang="ts">
const { data } = await useAsyncData('navigation', () => {
  return queryCollectionNavigation('docs')
    .where('published', '=', true)
    .order('date', 'DESC')
})
</script>


```

--------------------------------

### Configure PostgreSQL Database Adapter

Source: https://content.nuxt.com/docs/getting-started/configuration

Configures the PostgreSQL database adapter. Requires the `pg` package to be installed and the database connection URL to be provided, typically via environment variables.

```typescript
export default defineNuxtConfig({
  content: {
    database: {
      type: 'postgresql',
      url: process.env.POSTGRES_URL,
      /* Other options for `pg` */
    }
  }
})
```

--------------------------------

### Basic Search Implementation

Source: https://content.nuxt.com/docs/utils/use-search-collection

A complete example of a search page component using useSearchCollection. It includes an input for the query and a list to display results, triggering search on input.

```vue
<script setup lang="ts">
const { status, search } = useSearchCollection('docs')

const query = ref('')
const results = ref([])

async function onSearch() {
  results.value = query.value
    ? await search(query.value, { limit: 20 })
    : []
}
</script>

<template>
  <UInput v-model="query" :disabled="status !== 'ready'" @input="onSearch" />
  <ul>
    <li v-for="result in results" :key="result.id">
      <NuxtLink :to="result.id">{{ result.title }}</NuxtLink>
    </li>
  </ul>
</template>

```

--------------------------------

### Configure Remark Plugins

Source: https://content.nuxt.com/docs/getting-started/configuration

Integrate and override remark plugins for markdown parsing. This example shows how to configure `remark-emoji`, disable `remark-gfm`, and add `remark-oembed`.

```typescript
export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        // Object syntax can be used to override default options
        remarkPlugins: {
          // Override remark-emoji options
          'remark-emoji': {
            options: {
              emoticon: true
            }
          },
          // Disable remark-gfm
          'remark-gfm': false,
          // Add remark-oembed
          'remark-oembed': {
            // Options
          }
        },
      }
    }
  }
})
```

--------------------------------

### Frontmatter Syntax Example

Source: https://content.nuxt.com/docs/files/markdown

Define frontmatter at the top of Markdown files using `---` delimiters for key-value pairs. These are accessible via querying.

```markdown
---
title: 'Title of the page'
description: 'meta description of the page'
---

<!-- Content of the page -->

```

--------------------------------

### Enable Native SQLite Support (Deprecated)

Source: https://content.nuxt.com/docs/getting-started/configuration

Deprecated example of enabling native SQLite support. Use `sqliteConnector` instead. This requires Node.js v22.5.0 or newer.

```typescript
export default defineNuxtConfig({
  content: {
    experimental: { nativeSqlite: true },
  },
});

```

--------------------------------

### Allow Native Builds in package.json for pnpm

Source: https://content.nuxt.com/docs/getting-started/installation

Configure your project's package.json to explicitly allow native builds for specific dependencies when a non-interactive setup is needed with pnpm.

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

```

--------------------------------

### Exclude all dot files from collection source

Source: https://content.nuxt.com/docs/getting-started/migration

To ignore dot files in Nuxt Content v3, add `ignore: ['**/.*']` to the `exclude` option within your collection's source configuration. This example shows how to exclude all files starting with a dot.

```javascript
defineCollection({
  source: {
    include: '**',
    exclude: ['**/.*']
  }
})
```

--------------------------------

### Implement Document Driven Mode in v3

Source: https://content.nuxt.com/docs/getting-started/migration

This example shows how to implement document-driven mode in Nuxt Content v3 by creating a catch-all page that fetches content based on the route path using queryCollection.

```vue
<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

<template>
  <div>
    <header><!-- ... --></header>

    <ContentRenderer v-if="page" :value="page" />

    <footer><!-- ... --></footer>
  </div>
</template>

```

--------------------------------

### Example: Modify Markdown and Calculate Reading Time

Source: https://content.nuxt.com/docs/advanced/hooks

Demonstrates modifying markdown content by replacing 'react' with 'Vue' and calculating reading time in the `content:file:afterParse` hook. Requires `zod` for schema definition.

```javascript
export default defineNuxtConfig({
  // ...
  hooks: {
    'content:file:beforeParse'(ctx) {
      const { file } = ctx;

      if (file.id.endsWith(".md")) {
        file.body = file.body.replace(/react/gi, "Vue");
      }
    },
    'content:file:afterParse'(ctx) {
      const { file, content } = ctx;

      const wordsPerMinute = 180;
      const text = typeof file.body === 'string' ? file.body : '';
      const wordCount = text.split(/\s+/).length;

      content.readingTime = Math.ceil(wordCount / wordsPerMinute);
    }
  }
})
```

```javascript
export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md',
      schema: z.object({
        readingTime: z.number().optional()
      })
    })
  }
});
```

--------------------------------

### Deferred Initialization with init()

Source: https://content.nuxt.com/docs/utils/use-search-collection

Demonstrates how to defer the index building process by setting `immediate: false` and manually triggering it with the `init()` function when the input field gains focus.

```vue
<script setup lang="ts">
const { status, search, init } = useSearchCollection('docs', {
  immediate: false,
})

async function onFocus() {
  if (status.value === 'idle') {
    await init()
  }
}
</script>


```

--------------------------------

### Generate Static Site with Nuxt

Source: https://content.nuxt.com/docs/deploy/static

Run this command to build your Nuxt application with static site generation. The output will be in the `dist/` directory, ready for upload to any static hosting service.

```bash
npx nuxi generate

```

--------------------------------

### Create First Markdown Page

Source: https://content.nuxt.com/docs/getting-started/installation

Create a `content/index.md` file to serve as your first Markdown page.

```markdown
# My First Page

Here is some content.

```

--------------------------------

### Dockerfile for Bun Deployment

Source: https://content.nuxt.com/docs/deploy/docker

This Dockerfile demonstrates how to deploy your Content app using the official Bun image. It utilizes multi-stage builds for efficient deployment.

```docker
# use the official Bun image
# see all versions at https://hub.docker.com/r/oven/bun/tags
FROM oven/bun:1 AS build
WORKDIR /app

COPY package.json bun.lock* ./

# use ignore-scripts to avoid building node modules like better-sqlite3
RUN bun install --frozen-lockfile --ignore-scripts

# Copy the entire project
COPY . .

RUN bun --bun run build

# copy production dependencies and source code into final image
FROM oven/bun:1 AS production
WORKDIR /app

# Only `.output` folder is needed from the build stage
COPY --from=build /app/.output /app

# run the app
EXPOSE 3000/tcp
ENTRYPOINT [ "bun", "--bun", "run", "/app/server/index.mjs" ]

```

--------------------------------

### Build for Production

Source: https://content.nuxt.com/templates/docus

Generate production-ready build files for deployment. The output will be located in the .output directory.

```bash
npm run build

```

--------------------------------

### Configure LibSQL for Nuxt Content

Source: https://content.nuxt.com/docs/deploy/serverless

Set up LibSQL (Turso) as the database for Nuxt Content, requiring the database URL and authentication token from environment variables.

```javascript
export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  content: {
    database: {
      type: 'libsql',
      url: process.env.TURSO_DATABASE_URL,
      authToken: process.env.TURSO_AUTH_TOKEN,
    }
  }
})
```

--------------------------------

### Limit Collection Results

Source: https://content.nuxt.com/docs/utils/query-collection

Limit the number of results returned by the query. Use this to fetch only a specific number of documents, for example, for pagination.

```javascript
const route = useRoute()
const { data } = await useAsyncData(route.path, () => {
  return queryCollection('docs')
    .limit(10)
    .all()
})
```

--------------------------------

### Nuxt Project Structure Overview

Source: https://content.nuxt.com/templates/docus

Understand the directory structure of a Nuxt Docus project. Key directories include 'content' for markdown, 'public' for static assets, and 'package.json' for dependencies.

```bash
my-docs/
├── content/              # Your markdown content
│   ├── index.md         # Homepage
│   ├── 1.getting-started/  # Getting started section
│   └── 2.essentials/    # Essential documentation
├── public/              # Static assets
└── package.json         # Dependencies and scripts

```

--------------------------------

### Injected Variables in Document

Source: https://content.nuxt.com/docs/files/markdown

Lists example variables that are injected into the document context when using Nuxt Content, including 'excerpt' and 'body'.

```json
{
  "excerpt": Object,
  "body": Object
  // ... other keys
}

```

--------------------------------

### Configure Custom Paragraph Component Alias

Source: https://content.nuxt.com/docs/getting-started/configuration

Example of configuring Nuxt Content to use a custom component 'MyCustomParagraph' instead of the default paragraph component.

```typescript
export default defineNuxtConfig({
  content: {
    renderer: {
      alias: {
        p: 'MyCustomParagraph'
      }
    }
  }
})

```

--------------------------------

### Build Nuxt Project with Node Preset

Source: https://content.nuxt.com/docs/deploy/server

Use this command to build your Nuxt project when the Node server preset is active. This generates a runnable Node.js server.

```bash
nuxi build

```

--------------------------------

### Add Custom Languages for Syntax Highlighting

Source: https://content.nuxt.com/docs/getting-started/configuration

Specify additional languages for syntax highlighting using the `highlight.langs` option. This example adds 'c', 'cpp', and 'java'.

```typescript
export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        highlight: {
          langs: [
            'c',
            'cpp',
            'java'
          ]
        }
      }
    }
  }
})
```

--------------------------------

### Nuxt UI ContentSearch Component Example

Source: https://content.nuxt.com/docs/advanced/fulltext-search

Demonstrates how to use the UContentSearch component with fetched navigation and search files. Configure fuse.js options like resultLimit.

```vue
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
const { data: files } = await useAsyncData('search', () => queryCollectionSearchSections('docs'))

const searchTerm = ref('')
</script>

<template>
  <UContentSearch
    v-model:search-term="searchTerm"
    :files="files"
    :navigation="navigation"
    :fuse="{ resultLimit: 42 }"
  />
</template>

```

--------------------------------

### Query Collections on Server Side

Source: https://content.nuxt.com/docs/utils/query-collection

Example of querying collections on the server side using Nuxt Content. Requires passing the `event` object as the first argument to `queryCollection`.

```typescript
export default eventHandler(async (event) => {
  const { slug } = getRouterParams(event)
  const page = await queryCollection(event, 'docs').path(slug).first()
  return page
})
```

--------------------------------

### Configure Collection Source with Include, Exclude, and Prefix

Source: https://content.nuxt.com/docs/collections/sources

Specify include and exclude glob patterns for content files, and manually set a URL prefix for pages.

```typescript
defineCollection({
  type: "page",
  source: {
    include: "en/**",
    exclude: ["en/index.md"],
    prefix: '/'
  }
})
```

--------------------------------

### Deploy Nuxt Content App to Vercel

Source: https://content.nuxt.com/docs/deploy/vercel

Execute this command in your project's root directory to deploy your Nuxt Content app to Vercel. Alternatively, create a new project from your Git repository on the Vercel dashboard.

```bash
npx vercel deploy
```

--------------------------------

### Configure Wrangler for Local D1 Database Preview

Source: https://content.nuxt.com/docs/deploy/cloudflare-pages

Use a wrangler.jsonc file to configure a local D1 database for testing your Nuxt Content app with `nuxi preview`. Ensure the binding name matches the one used by the module.

```json
{
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "example-db",
      "database_id": "example-db-id"
    }
  ]
}

```

--------------------------------

### Directory Structure for Ordering

Source: https://content.nuxt.com/docs/collections/types

Use numeric prefixes in file and directory names, separated by a '.', to control the display order of content lists. Single-digit numbers should be prefixed with '0' for correct alphabetical sorting.

```text
content/
  1.frameworks/
    1.vue.md
    2.nuxt.md
    ...
  2.examples/
    01.nuxthub.md
    02.vercel.md
    03.netlify.md
    04.heroku.md
    ...
    10.cloudflare.md
    index.md

```

--------------------------------

### all()

Source: https://content.nuxt.com/docs/utils/query-collection

Execute the query and return all matching results.

```APIDOC
## all()

### Description
Execute the query and return all matching results.

### Returns
A Promise that resolves to an array of all matching documents.
```

--------------------------------

### Configure Nuxt Content Preview API

Source: https://content.nuxt.com/blog/ui-pro-docs-migration

Enable preview mode in Nuxt configuration by binding the Studio API. This replaces the deprecated `@nuxthq/studio` module.

```typescript
export default defineNuxtConfig({
  content: {
    preview: {
      api: 'https://api.nuxt.studio'
    }
  },
})
```

--------------------------------

### Count Collection Results

Source: https://content.nuxt.com/docs/utils/query-collection

Count the number of matched collection entries based on the query. This method is useful for getting the total number of documents that match certain criteria.

```javascript
const route = useRoute()
const { data } = await useAsyncData(route.path, () => {
  return queryCollection('docs')
    // Count matches
    .count()
})
```

--------------------------------

### Complex OR Condition Group

Source: https://content.nuxt.com/docs/utils/query-collection

Add a complex OR condition group to filter documents. This example selects published documents and then applies an OR group to find those that are either featured or have a high priority.

```javascript
const { data } = await useAsyncData('featured-docs', () => {
  return queryCollection('docs')
    .where('published', '=', true)
    .orWhere(query => query.where('featured', '=', true).where('priority', '>', 5))
    .all()
})

// Generated SQL
// SELECT * FROM docs WHERE published = true AND (featured = true OR priority > 5)

```

--------------------------------

### Define Basic Content Collection

Source: https://content.nuxt.com/docs/collections/define

Configure a basic content collection named 'docs' to load all markdown files from the content directory. Ensure a `content.config.ts` file exists in your project root.

```typescript
import { defineCollection, defineContentConfig } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    docs: defineCollection({
      // Specify the type of content in this collection
      type: 'page',
      // Load every file inside the `content` directory
      source: '**',
    })
  }
})
```

--------------------------------

### Configure Theme and Source in Main CSS

Source: https://content.nuxt.com/blog/ui-pro-docs-migration

Use the `@theme` directive for CSS-first theming and `@source` to detect classes in markdown files. This replaces the `tailwind.config.ts` file.

```css
@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

@source "../content/**/*";

@theme {
  --font-sans: 'DM Sans', sans-serif;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}
```

--------------------------------

### Basic Slot Usage in Vue Component

Source: https://content.nuxt.com/docs/components/slot

Use Vue's `<slot />` component to render Markdown content directly within your Vue component. No additional setup is required.

```vue
<template>
  <div class="callout">
    <slot />
  </div>
</template>

```

--------------------------------

### queryCollection

Source: https://content.nuxt.com/docs/utils/query-collection

Initializes a query builder for a specific collection. This is the entry point for all collection queries.

```APIDOC
## queryCollection(collection: CollectionName)

### Description
Create a query builder to search in the specific collection.

### Parameters
* `collection` (string) - Required - The key of defined collection in `content.config.ts`
```

--------------------------------

### Complex AND Condition Group

Source: https://content.nuxt.com/docs/utils/query-collection

Add a complex AND condition group to filter documents. This example selects published documents and then applies an AND group to find those published after a certain date and in a specific category.

```javascript
const { data } = await useAsyncData('recent-docs', () => {
  return queryCollection('docs')
    .where('published', '=', true)
    .andWhere(query => query.where('date', '>', '2024-01-01').where('category', '=', 'news'))
    .all()
})

// Generated SQL
// SELECT * FROM docs WHERE published = true AND (date > '2024-01-01' AND category = 'news')

```

--------------------------------

### first()

Source: https://content.nuxt.com/docs/utils/query-collection

Execute the query and return the first matching result.

```APIDOC
## first()

### Description
Execute the query and return the first matching result.

### Returns
A Promise that resolves to the first matching document, or `null` if no documents match.
```

--------------------------------

### Example of JSON Converted CSV Data

Source: https://content.nuxt.com/docs/files/csv

Illustrates the output format when CSV parsing is configured to convert rows into JSON objects. Each object represents a row with keys derived from the header.

```json
[
  {
    "id": "1",
    "name": "John Doe",
    "email": "john@example.com"
  },
  {
    "id": "2",
    "name": "Jane Smith",
    "email": "jane@example.com"
  }
]
```

--------------------------------

### Configure PostgreSQL for Nuxt Content

Source: https://content.nuxt.com/docs/deploy/serverless

Set up PostgreSQL as the database for Nuxt Content by defining the type and providing the connection URL via environment variables.

```javascript
export default defineNuxtConfig({
  content: {
    database: {
      type: 'postgresql',
      url: process.env.POSTGRES_URL
    }
  }
})
```

--------------------------------

### Fetch Blog Posts using queryCollection in Vue

Source: https://content.nuxt.com/blog/v3

Use `queryCollection` to fetch all posts from the 'blog' collection in a Vue component. This example demonstrates fetching data asynchronously and displaying it as a list of links.

```vue
<script setup lang="ts">
const { data: posts } = await useAsyncData('blog', () => {
  return queryCollection('blog').all()
})
</script>

<template>
  <div>
    <h1>Blog</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <NuxtLink :to="post.path">{{ post.title }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>
```

--------------------------------

### Define Content Collections in Nuxt Content

Source: https://content.nuxt.com/blog/v3

Configure database structure, utility types, and methods for collections in `content.config.ts`. This example defines a 'posts' collection with a schema for markdown files in the 'blog' directory.

```typescript
import { defineCollection, z } from '@nuxt/content'

// Export collections
export const collections = {
  // Define collection using `defineCollection` utility
  posts: defineCollection({
    // Specify the type of content in this collection
    type: 'page',
    // Load every file matching this pattern
    source: 'blog/**/*.md',
    // Define custom schema for this collection
    schema: z.object({
      date: z.date(),
      image: z.object({
        src: z.string(),
        alt: z.string()
      }),
      badge: z.object({
        label: z.string(),
        color: z.string()
      })
    })
  }),
}
```

--------------------------------

### Nuxt Configuration for Content Preview API

Source: https://content.nuxt.com/blog/ui-pro-docs-migration

Configuration for enabling the Nuxt Content Preview API, replacing the deprecated Studio module.

```typescript
export default defineNuxtConfig({
  content: {
    preview: {
      api: 'https://api.nuxt.studio'
    }
  },
})

```

--------------------------------

### Override Database Configuration in nuxt.config.ts

Source: https://content.nuxt.com/docs/deploy/vercel

Provide your custom database configuration, including the connection string for supported Vercel database providers, within your `nuxt.config.ts` file to override the default SQLite setup.

```typescript
export default defineNuxtConfig({
  // ...
  content: {
    // Overrides the default SQLite database configuration
    // Example for a PostgreSQL database:
    // documentDriven: {
    //   databaseUrl: process.env.POSTGRES_URL
    // }
  }
  // ...
})
```

--------------------------------

### Custom MCP Tool for API Status Check

Source: https://content.nuxt.com/blog/ai-assistant

Define a custom tool for the AI Assistant to check API endpoint status. This example uses zod for input validation and requires an 'endpoint' string.

```typescript
export default defineMcpTool({
  description: 'Check the current status of the API',
  inputSchema: z.object({
    endpoint: z.string().describe('API endpoint to check')
  }),
  handler: async ({ endpoint }) => {
    const status = await checkEndpointStatus(endpoint)
    return {
      content: [{
        type: 'text',
        text: `API endpoint ${endpoint} is ${status}`
      }]
    }
  }
})

```

--------------------------------

### Basic Authentication for Git Repositories

Source: https://content.nuxt.com/docs/collections/sources

Use this for basic authentication, such as with BitBucket repositories. Ensure credentials are not committed directly into your code.

```javascript
defineCollection({
  type: 'page',
  source: {
    repository: {
      url: 'https://bitbucket.org/username/repo',
      auth: {
        username: 'username',
        password: 'password',
      },
    },
  },
})
```

--------------------------------

### Define Data in YAML Frontmatter

Source: https://content.nuxt.com/docs/files/markdown

This example shows how to define variables like 'title', 'description', and 'customVariable' in the YAML frontmatter of a Markdown file. These variables can then be accessed within the document using the `{{ $doc.variable }}` syntax.

```markdown
---
title: 'Title of the page'
description: 'meta description of the page'
customVariable: 'Custom Value'
---

# The Title is {{ $doc.title }} and customVariable is {{ $doc.customVariable || 'defaultValue' }}


```

--------------------------------

### Use Landing Hero Component in Markdown

Source: https://content.nuxt.com/

Example of using a custom Vue component (`landing-hero`) within a Markdown file using Nuxt Content's MDC syntax. Props and slots are passed to the component.

```markdown
---
title: The Mountains Website
description: A website about the most iconic mountains in the world.
---

::landing-hero
---
image: /mountains/everest.jpg
---
#title
The Everest.

#description
The Everest is the highest mountain in the world, standing at 8,848 meters above sea level.
::

```

--------------------------------

### Basic Nuxt Content Configuration

Source: https://content.nuxt.com/docs/getting-started/configuration

Configure the Nuxt Content module by adding the `content` property to your `nuxt.config.ts` file.

```typescript
export default defineNuxtConfig({
  content: {
    // Options
  }
})
```

--------------------------------

### Pre-render Pages for Serverless Optimization

Source: https://content.nuxt.com/docs/deploy/serverless

Optimize serverless Nuxt applications by pre-rendering specific pages, such as the root ('/'), using the `routeRules` configuration.

```javascript
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true }
  }
})
```

--------------------------------

### Create Dynamic Pages with Locale-Based Content Fetching

Source: https://content.nuxt.com/docs/integrations/i18n

Create a catch-all page that dynamically fetches content based on the current locale, with an optional fallback to the default locale.

```vue
<script setup lang="ts">
import { withLeadingSlash } from 'ufo'
import type { Collections } from '@nuxt/content'

const route = useRoute()
const { locale } = useI18n()
const slug = computed(() => Array.isArray(route.params.slug) ? withLeadingSlash(String(route.params.slug.join('/'))) : withLeadingSlash(String(route.params.slug)))

const { data: page } = await useAsyncData('page-' + slug.value, async () => {
  // Build collection name based on current locale
  const collection = ('content_' + locale.value) as keyof Collections
  const content = await queryCollection(collection).path(slug.value).first()

  // Optional: fallback to default locale if content is missing
  if (!content && locale.value !== 'en') {
    return await queryCollection('content_en').path(slug.value).first()
  }

  return content
}, {
  watch: [locale], // Refetch when locale changes
})
</script>

<template>
  <ContentRenderer v-if="page" :value="page" />
  <div v-else>
    <h1>Page not found</h1>
    <p>This page doesn't exist in {{ locale }} language.</p>
  </div>
</template>


```

--------------------------------

### Configure Syntax Highlighting Theme

Source: https://content.nuxt.com/docs/getting-started/configuration

Set the syntax highlighting theme using `highlight.theme`. Supports single themes or an object with multiple themes for different color modes.

```typescript
export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        highlight: {
          // Theme used in all color schemes.
          theme: 'github-light',
          // OR
          theme: {
            // Default theme (same as single string)
            default: 'github-light',
            // Theme used if `html.dark`
            dark: 'github-dark',
            // Theme used if `html.sepia`
            sepia: 'monokai'
          }
        }
      }
    }
  }
})
```