Nuxt Content

Nuxt Studio is a self-hosted, open-source content management solution that runs alongside your Nuxt Content website. Key features include:

• TipTap Visual Editor: A Notion-like Markdown editor with MDC component support, slash commands, and real-time MDC syntax conversion.
• Form-Based Editor: Automatically generated schema-based forms for frontmatter, YAML, and JSON files based on your collection definitions.
• File Operations: Full CRUD (Create, Read, Update, Delete) capabilities for the content/ directory, including draft management.
• Media Management: A centralized library for assets in the public/ directory.
• Git Integration: Direct commits to GitHub or GitLab with conflict detection and custom commit messages.
• Real-time Preview: Side-by-side live preview of draft changes on your website.
• Authentication: Supports GitHub OAuth, GitLab OAuth, Google OAuth, or custom authentication flows.

Nuxt Content v3 uses a SQLite-based storage layer instead of the file-based system used in v2. This architecture improves performance and scalability by moving away from parsing individual cache files during runtime.

The workflow consists of three stages:

1. Generation: Content is parsed into an Abstract Syntax Tree (AST) and inserted into collection-specific tables based on your defined schema. This data is saved into a database dump file.
2. Restoration: On the first query during runtime (cold start), the module restores the dump into the target database. It uses an integrity check to ensure the database is up-to-date and to prevent duplicate imports.
3. Client-side execution: For client-side navigation, the module downloads the dump from the server and initializes a local SQLite database in the browser using WASM. Subsequent queries are executed locally, enabling high responsiveness and offline capabilities.

You can use Zod v3 to define collection schemas for data consistency and type-safety. When using Zod v3, you must install both zod and zod-to-json-schema.

Note: Do not use the deprecated z re-export from @nuxt/content. Instead, import z directly from zod or zod/v3.

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

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

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: 'page',
      source: 'blog/*.md',
      schema: z.object({
        title: z.string(),
        description: z.string().optional(),
        date: z.date(),
        draft: z.boolean().default(false),
        tags: z.array(z.string()).optional(),
        image: z.object({
          src: property(z.string()).editor({ input: 'media' }),
          alt: z.string()
        })
      })
    })
  }
})

Nuxt Studio forms are dynamically generated based on the collection schema defined in your content.config.ts. By using zod to define your collection schema, you provide both type-safety for your content and instructions for how the Studio editor should render form inputs.

To define a schema, add the schema property to a collection within defineContentConfig using the z object provided by @nuxt/content.

export default defineContentConfig({
  collections: {
    posts: defineCollection({
      type: 'page',
      source: 'blog/*.md',
      schema: z.object({
        draft: z.boolean().default(false),
        category: z.enum(['Alps', 'Himalaya', 'Pyrenees']).optional(),
        date: z.date(),
        image: z.object({
          src: z.string().editor({ input: 'media' }),
          alt: z.string(),
        }),
        slug: z.string().editor({ hidden: true }),
        icon: z.string().optional().editor({ input: 'icon' }),
        authors: z.array(z.object({
          slug: z.string(),
          username: z.string(),
          name: z.string(),
          to: z.string(),
          avatar: z.object({
            src: z.string(),
            alt: z.string(),
          }),
        })),
      }),
    }),
  },
})