注意: これは@timbenniksによるOSSプロジェクトであり、Contentstackチームによって公式にメンテナンスされているパッケージではありません。サポートのご依頼は、GithubのIssueまたは@timbenniksへのダイレクトメッセージにて承ります。

Nuxt Contentstack

NuxtのためのContentstack連携。

機能

⚡️ 簡単なセットアップ
⚡️ エントリのクエリ
⚡️ ライブプレビューとビジュアルビルダー
⚡️ パーソナライゼーション
⚡️ 公開SDK: TS Delivery SDK、Live Preview Utils SDK、Personalize SDK。

クイックセットアップ

1つのコマンドでNuxtアプリケーションにモジュールをインストールします

npx nuxi module add nuxt-contentstack

または: nuxt.config.ts に追加します

modules: ['nuxt-contentstack'],

'nuxt-contentstack': {
  debug: true,
  deliverySdkOptions: {
    apiKey: 'blt34bdc2becb9eb935',
    deliveryToken: 'csd38b9b7f1076de03fc347531',
    region: Region.EU,
    environment: 'preview',
    live_preview: {
      preview_token: 'csa2fe339f6713f8a52eff086c',
      enable: true,
    },
  },
  livePreviewSdkOptions: {
    editableTags: true,
    editButton: {
      enable: true,
    },
  },
  personalizeSdkOptions: {
    enable: true,
    projectUid: '67054a4e564522fcfa170c43',
  },
},

オプション

debug

設定オブジェクト全体をターミナルにダンプする一般的なデバッグ。プレビューSDKのデバッグモードもオンにします。

deliverySdkOptions

これは完全なContentstack StackConfigです。参照: https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/typescript/reference

livePreviewSdkOptions

これはLive Preview Utilsのための完全なContentstack設定です。詳細はこちら: https://www.contentstack.com/docs/developers/set-up-live-preview/get-started-with-live-preview-utils-sdk

personalizeSdkOptions

enable: パーソナライゼーションを有効にする
projectUid: パーソナライゼーションプロジェクトのUID (Contentstack UIにあります)

パーソナライゼーションの例

// get Personalize SDK
const { Personalize } = useNuxtApp().$contentstack

// set attribute
await Personalize.set({ age: 20 });

// trigger impression
// experienceShortId to be found on the experiences list page in contentstack
experienceShortId = 0 
await Personalize.triggerImpression(experienceShortId);

// trigger conversion event
// 'eventKey' can be found when creatign an event in Contentstack Personalize
await Personalize.triggerEvent('eventKey');

提供

このモジュールは、以下のプロパティを持つ$contentstackオブジェクトを提供します

stack: Delivery SDKからのStackオブジェクト。これですべてをクエリできます。
ContentstackLivePreview: Live Preview Utils SDKのインスタンス。
livePreviewEnabled: ライブプレビューは有効になっていますか？
editableTags: ビジュアル構築のための編集可能なタグが必要ですか？
Personalize: Personalize SDKのインスタンス。
variantAlias: Delivery SDKに渡すバリアントマニフェスト。

const { 
  editableTags, 
  stack, 
  livePreviewEnabled, 
  ContentstackLivePreview, 
  Personalize, 
  variantAlias
} = useNuxtApp().$contentstack

コンポーザブル

このモジュールは、URLフィールドを持つエントリをクエリできるコンポーザブルuseGetEntryByUrlを提供します。また、ライブ編集の変更をリッスンし、CMSのエントリの変更に基づいてコンテンツを更新します。また、パーソナライゼーションにも対応しています。

const { data: page } = await useGetEntryByUrl('page', '/about', ['reference.fields'], ['jsonRtePath'], 'en-us')

TODO

SSRモードでのライブプレビュー
エンドポイントURLジェネレータにすべてのリージョンを追加する

貢献

ローカル開発

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release