Nuxt Content v3がリリースされ、SQLベースのストレージ、コレクション、より良いStudio統合のためのプレビューAPIが導入され、パフォーマンスが大幅に改善されました。
SQLベースのストレージ
Nuxt Content v3 はファイルベースのストレージから SQLベースのデータベースシステムに移行。
これにより、大規模データセットのクエリ時の I/O 操作が削減され、パフォーマンスとスケーラビリティが向上。
Contentで使用できるファイルタイプ（yml、json、markdown）には影響せず、開発モード、サーバーホスティング、静的生成のゼロコンフィグサポートを引き続き提供します。 さらに、サーバーレスホスティングがサポートされ、クライアントサイドナビゲーションのパフォーマンスが向上しました。
サーバーレス互換性
Nuxt Content v2 では、すべてのコンテンツファイルを保存するための大きなバンドルサイズが問題だったが、v3 ではデータベースアダプターを導入し、サーバーレス環境でのデータ永続化を実現。
ブラウザでの WASM SQLite
クライアントサイドのナビゲーションでは、初回のコンテンツクエリ時にサーバーから生成されたダンプをダウンロードし、ブラウザ内にローカルの SQLite データベースを初期化。
これにより、以降のクエリはローカルで実行され、アプリケーションの応答性が向上。
Content Collections
Content Collectionsは、Nuxt Content プロジェクト内の関連するコンテンツアイテムのグループ。大規模データセットの効率的な管理に役立ちます。
content.config.ts ファイルでコレクションを定義し、データベース構造、ユーティリティタイプ、コンテンツの検索、解析、クエリメソッドを設定可能。
また、スキーマを定義することもでき、より型安全になりました。
import { defineCollection, z } from '@nuxt/content'
// コレクションをエクスポート
export const collections = {
// `defineCollection` ユーティリティを使用してコレクションを定義
posts: defineCollection({
// このコレクション内のコンテンツのタイプを指定
type: 'page',
// このパターンに一致するすべてのファイルをロード
source: 'blog/**/*.md',
// このコレクションのカスタムスキーマを定義
schema: z.object({
date: z.date(),
image: z.object({
src: z.string(),
alt: z.string()
}),
badge: z.object({
label: z.string(),
color: z.string()
})
})
}),
}Vue ユーティリティの追加
以下のユーティリティを公開しました。
- queryCollection：強力なクエリビルダーでコレクションを取得
- queryCollectionNavigation：特定のコレクションの生成されたナビゲーションを取得
- queryCollectionItemSurroundings：特定のパスの兄弟コンテンツを取得
- queryCollectionSearchSections：コレクションから検索可能なセクションを取得
これらのユーティリティにより、Vue ページやコンポーネント内でのコンテンツの効率的な取得とクエリが可能になりました。
組み込みコンポーネントのアップデート
ContentRendered
Markdownで書かれた文章を、HTMLやVue.jsのコンポーネントに変換して表示します。
Slot の改良
以前は ContentSlot を使っていたが、今は Slot という名前になり、より便利になりました。これにより、VueコンポーネントがMarkdownや他の機能と簡単に組み合わせられるようになっています。
Prose Components
MDCの構文に合わせてあらかじめデザインされたコンポーネントで、見栄えを良くするためにスタイリングが統合されています。
TypeScript 統合
新しいコレクションシステムは、すべてのデータに自動的に TypeScript タイプを提供。ユーティリティと API は、コレクション定義に基づいて強く型付けされ、開発中の型安全性を確保。
Nuxt Studioとの統合
Nuxt Studioは、制作中のNuxt Contentプロジェクトを視覚的に編集するためのプラットフォームです。 Markdown、YAML、またはJSONファイルをサポートするエディタは、汎用性と使いやすさを保証します。
以前は独立したモジュールだった Studioモジュール が、より汎用的な設計にアップデートされ、Nuxt Content に直接組み込まれました。その結果、Studioは「プレビューAPI」として利用できるようになりました。
Studioのプレビュー機能を有効にするのは非常に簡単で、Nuxt Contentの設定で、Studio APIを「プレビューAPI」として指定するだけです。
設定例：
// nuxt.config.ts
export default defineNuxtConfig({
content: {
preview: {
api: 'https://api.nuxt.studio'
}
}
})このシンプルな設定のおかげで、Studioを使うために追加のモジュールをインストールする必要がなくなり、セットアップがより速く簡単になりました。
まとめ
Nuxt Content 3.0 は、パフォーマンスの向上やサーバーレス互換性の強化、TypeScript 統合など、多くの新機能と改善をもたらしております。
このリリースにより、開発者はより効率的にコンテンツを管理し、スムーズなユーザー体験を提供できるようになりました。
さらに、Nuxt Studio との統合も進み、視覚的な編集が可能になったことで、プロジェクトの管理がさらに簡単に。これらのアップデートにより、Nuxt Content はより強力で柔軟なツールとして進化を遂げました。
