Define Content Collections

The Nuxt Content module automatically parses any content files within the content/ directory located at the root of your Nuxt application. This setup allows you to freely structure the folder to suit your project's needs.

For better organization, consider using Content Collections, which let you categorize and manage content more effectively. These collections are defined in a content.config.ts file.

What are Content Collections?

Content Collections organize related items within your Nuxt Content project. They provide a structured way to manage your content, making it easier to query, display, and maintain your site's data.

Key features include:

• Logical Grouping: Group similar content together, such as blog posts, product pages, or documentation articles
• Shared Configuration: Apply common settings and validations across all items within a collection
• Improved Querying: Fetch and filter related content items efficiently
• Automatic Type Inference: Get type safety and autocompletion in your development environment
• Flexible Structure: Organize collections by content type, category, or any other logical grouping that suits your needs

Defining Collections

Create a content.config.ts file in your project's root directory. This special file configures your collections database, utility types, and content handling.

Here's a basic example:

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

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

Collection Schema

Schemas enforce data consistency within a collection and serve as the source of truth for TypeScript types.

On top of the built-in fields, you can define a schema by adding the schema property to your collection by using a zod schema:

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

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      source: 'blog/*.md',
      type: 'page',
      // Define custom schema for docs collection
      schema: z.object({
        tags: z.array(z.string()),
        image: z.string(),
        date: z.date()
      })
    })
  }
})

Querying Collections

Use the queryCollection util to fetch one or all items from a collection:

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

defineCollection()

The defineCollection function defines a collection in your content configuration. Here's its TypeScript signature:

function defineCollection(collection: Collection): DefinedCollection

type Collection = {
  // Determines how content is processed
  type: 'page' | 'data'
  // Specifies content location
  source?: string | CollectionSource
  // Zod schema for content validation and typing
  schema?: ZodObject<T>
}

type CollectionSource = {
  // Glob pattern for content matching
  include: string
  // .path prefix (only applies to 'page' type)
  prefix?: string
  // Glob patterns to exclude content
  exclude?: string[]
  // Root directory for content matching
  cwd?: string
  // Remote git repository URL (e.g., https://github.com/nuxt/content)
  repository?: string
  // Authentication token for private repositories (e.g., GitHub personal access token)
  authToken?: string
}

The function returns the defined collection object.