# Source: https://content.nuxt.com/raw/blog/v3.md

# **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.

<prose-note>

The new database system enhances the way your data files are stored and structured, ensuring better performance and scalability. This update is entirely behind the scenes and does not affect the file types you can use in Content (`yml`, `json`, and `markdown` ).

</prose-note>

This switch is transparent to users and Nuxt Content still provides a zero config support for development mode, [server hosting](/docs/deploy/server) and [static generation](/docs/deploy/static).

Furthermore, [serverless](/docs/deploy/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](https://netlify.com), [NuxtHub](https://hub.nuxt.com) or [Vercel](https://vercel.com).

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.

<prose-note>

We're manually switching to the appropriate provider (Vercel / Postgres, NuxtHub / D1...) according to the [database type](https://cfec52f9.content-f0q.pages.dev/docs/getting-started/configuration#database) you've set in your config.

</prose-note>

### 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`](/docs/getting-started/configuration) 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.

```ts [content.config.ts]
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()
      })
    })
  }),
}
```

<prose-tip to="/docs/collections/define">

Learn more about collections in the documentation.

</prose-tip>

## 🔧 Simplified Vue Utils

We simplified the utils to now expose:

- [queryCollection](/docs/utils/query-collection) to fetch your collections with our powerful query builder
- [queryCollectionNavigation](/docs/utils/query-collection-navigation) to fetch the generated navigation for a specific collection
- [queryCollectionItemSurroundings](/docs/utils/query-collection-item-surroundings) to fetch sibling content for a specific path
- [queryCollectionSearchSections](/docs/utils/query-collection-search-sections) 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:

```vue [pages/blog.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>
```

## 📦 Built-in Components

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

- [ContentRenderer](/docs/components/content-renderer) to render the parsed Markdown to HTML & Vue components
- [Slot](/docs/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](/docs/components/prose) 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:

```vue [pages/about.vue]
<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](/docs/getting-started/migration).

<prose-note>

Note that we've decided to remove the document-driven mode to simplify the module usage.

</prose-note>

## 🖼️ Studio Integration

[Nuxt Studio](/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](https://github.com/nuxtlabs/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:

```ts [nuxt.config.ts]
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](https://nuxt.studio).

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