Announcing Nuxt Content 3.0

We are thrilled to announce the first stable version of Nuxt Content 3.0.0 ✨

🚀 Performance Improvements

Nuxt Content v3 moves away from a file-based storage approach to an SQL database system. Using a database instead of the file-based storage reduces many I/O operations when querying large datasets.

This switch is transparent to users and Nuxt Content still provides a zero config support for development mode, server hosting and static generation.

Furthermore, serverless hosting is now supported and client-side navigation performance has been improved.

Serverless Compatibility

A key challenge with Nuxt Content v2 was the large bundle size required to store all content files. It was an issue when deploying to serverless or edge platforms like Netlify, NuxtHub or Vercel.

In serverless environments, each user request triggers a fresh instance of your Nuxt server, it starts from scratch each time. This "stateless" nature means you can't store data in server memory or use file-based databases like SQLite. That's why we've implemented database adaptors that persist data independently of your server instances.

WASM SQLite in Browser

For client-side navigation, the module uses a similar approach. When the application executes the first content query, it downloads the generated dump from the server and initializes a local SQLite database within the browser. From that point onward, all queries are executed locally without needing to call the server: significantly improving the responsiveness of the application and providing a seamless user experience.

🗄️ Content Collections

Collections are groups of related content items within your Nuxt Content project. They help organize and manage large datasets more efficiently.

Define Collections

You can now define collections in the content.config.ts file to configure the database structure, utility types, and methods for finding, parsing, and querying content.

Collections Schema

Schemas enforce consistency within collections and improve TypeScript typings for better integration with Nuxt Content utilities.

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

🔧 Simplified Vue Utils

We simplified the utils to now expose:

• queryCollection to fetch your collections with our powerful query builder
• queryCollectionNavigation to fetch the generated navigation for a specific collection
• queryCollectionItemSurroundings to fetch sibling content for a specific path
• queryCollectionSearchSections to fetch searchable sections from a collection for enhanced content discovery

These four utils allow your to efficiently fetch and query your content within your Vue pages and components:

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

📦 Built-in Components

We've updated the components to include only the essentials:

• ContentRenderer to render the parsed Markdown to HTML & Vue components
• Slot replaced ContentSlot as we now support unwrapping using a directive, making your Vue components perfectly compatible to be used in both Vue & Markdown
• Prose Components are pre-designed components tailored for MDC syntax, with integrated styling for a good appearance

Here's an example of displaying the content of a Markdown file:

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

<template>
  <ContentRenderer v-if="page" :value="page" />
  <p v-else>About page not written yet.</p>
</template>

🔷 TypeScript Integration

The new collections system provides automatic TypeScript types for all your data. Every utility and API is strongly typed based on your collection definitions, ensuring robust type safety throughout development.

⬆️ Migrating from V2

Migration should be as easy as possible, this is why we wrote the migration guide.

🖼️ Studio Integration

Nuxt Studio is a platform to visually edit your Nuxt Content projects in production. With support for Markdown, YAML, or JSON files, our editor ensures versatility and ease of use.

Preview API

Previously an independent module, the Studio module has been updated to be more generic and is now integrated directly into Nuxt Content as a Preview API.

Enabling the preview functionality in Studio is easier than ever—simply configure the Studio API as your Preview API in your Nuxt Content settings:

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

This simplification means no extra module is required for Studio, making setup faster. Furthermore, the Preview API is now generic, enabling other providers to deliver great editing experiences on top of Nuxt Content.

Unified Documentation

In addition to this integration, we’ve unified the Content and Studio documentation and websites into a single comprehensive resource. Only the Studio platform (available once the user is logged-in) remains as a standalone site.

We can now take advantage of data structures and collections in Studio. The Studio platform supports and adapts its behaviour to collections and user-defined schemas. This enhancement will allow schema-generated forms for both YAML and JSON files as well as front-matter within Markdown files.