Announcing Nuxt Content 3.0

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

🚀 Performance improvements

Nuxt Content v3 moves away from the file based storing in production and leverage an SQL database system. Using a database instead of the file-based approach reduce many I/O operations when querying large datasets.

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

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.

To address this, Nuxt Content v3 leverages an SQL database system. This switch is transparent to users. We're providing a zero config support for development mode, server hosting and static generation. For serverless deployments, we support database adaptors (D1, Postgres & LibSQL).

WASM SQLite in Browser

For client-side navigation, the module utilizes a similar approach. When the application executes the first query for content, 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.

🗄️ 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'll be able to define collections in the content.config.ts file which is used by Nuxt Content to configure database structures, 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 composable looks for sibling contents of an specific path.
• queryCollectionSearchSections composable generates 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:

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

Studio is a platform to edit your Nuxt Content projects. Our versatile editor adapt to Markdown, YAML, or JSON files.

Previously an independent module, the Studio module is now integrated directly into Nuxt Content. Enable Studio is as simple as setting content.editor: true in your nuxt.config.ts file. This simplification means no extra module is required for Studio, making setup faster.

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