Nuxt Content Island モジュール

Nuxt Content Island モジュールは、Nuxt アプリケーションと Content Island API とのシームレスな統合を提供します。このモジュールは、Content Island に保存されているコンテンツの取得と管理を簡素化し、複雑なバックエンド統合の手間をかけずに、豊かでダイナミックなユーザーエクスペリエンスの作成に集中できるようにします。

説明

このモジュールは、Content Island によって強化された堅牢なコンテンツ管理を必要とする Nuxt アプリケーション向けに設計されています。バックエンド API 統合の複雑さを抽象化し、コンテンツにアクセス、クエリ、表示するためのシンプルで安全な方法を提供します。自動プラグインインジェクションとタイプセーフな構成により、開発者は Content Island の柔軟なコンテンツモデルと API を活用して、動的なサイトやアプリケーションを迅速に構築できます。

機能

• 簡単な統合: 簡単な設定で Content Island API に素早く接続できます。
• 安全な構成: Nuxt のランタイム構成を使用して API 認証情報を安全に管理します。
• 自動プラグインインジェクション: このモジュールは、クライアントインスタンスを $contentIsland として Nuxt コンテキストに自動的に注入します。
• タイプセーフなオプション: @content-island/api-client の Options 型を活用し、TypeScript サポートで構築されています。
• 柔軟なコンテンツ取得: 直感的なクエリパラメータを使用して、単一のアイテムまたはリストを簡単に取得します。
• カスタマイズ可能なデータ処理: Markdown レンダリング、シンタックスハイライト、リッチテキストフォーマットの人気ライブラリと統合します。

インストール

npm 経由でモジュールをインストールする

npx nuxi@latest module add @content-island/nuxt

# or using

npm install @content-island/nuxt

次に、モジュールを Nuxt 構成に追加します

export default defineNuxtConfig({
  modules: ['@content-island/nuxt'],
  contentIsland: {
    // Replace with your actual Content Island API token
    accessToken: process.env.CONTENT_ISLAND_ACCESS_TOKEN || 'YOUR_CONTENT_ISLAND_ACCESS_TOKEN',
    // Optional: see all available options below
  },
});

使用方法

インストールと設定後、モジュールはクライアントインスタンスを Nuxt アプリに注入し、コンテンツを簡単に取得できるようになります。ページコンポーネント内で使用する方法の例を次に示します。

<script setup lang="ts">
import { marked } from 'marked';
import { useRoute, useNuxtApp, useAsyncData } from '#imports';
import type { Post } from '~/api.models';

const { $contentIsland } = useNuxtApp();
const route = useRoute();
const slug = route.params.slug as string;

const { data: post } = await useAsyncData(`post-${slug}`, async () => {
  const foundPost = await $contentIsland.getContent<Post>({
    contentType: 'post',
    'fields.slug': slug,
  });
  return {
    ...foundPost,
    content: await marked(foundPost.content || ''),
  };
});
</script>

<template>
  <article v-if="post">
    <h1>{{ post.title }}</h1>
    <div v-html="post.content" />
  </article>
</template>

この例は、スラッグで投稿を取得し、marked を使用して Markdown コンテンツを処理する方法を示しています。

モジュールオプション

このモジュールは、次のオプションを受け入れます (@content-island/api-client から)

注: accessToken などの機密データには環境変数を使用することをお勧めします。

サンプルプロジェクト

完全に機能する例は、playground ディレクトリに用意されています。この例には、次のものが含まれます。

• コンテンツを動的に取得してレンダリングするページ。
• Markdown レンダリングとシンタックスハイライトとの統合。
• モジュールのセットアップと使用法を示すサンプル Nuxt 構成。

例を実行するには

npm install && cd playground && npm install
cd ..
npm start

貢献者

このモジュールのオリジナルアイデアと共同作業をしてくれた Paul Melero に特に感謝します。彼の貢献はこのプロジェクトの形成に不可欠でした。

ライセンス

MIT ライセンス。詳細は LICENSE ファイルを参照してください。