注意：這是一個由 @timbenniks 開發的 OSS 專案，並非 Contentstack 團隊正式維護的套件。支援請求可透過 Github issues 以及直接聯繫 @timbenniks 的管道進行。

Nuxt Contentstack

Contentstack 的 Nuxt 整合。

功能

⚡️ 輕鬆設定
⚡️ 查詢條目
⚡️ 即時預覽 & 可視化建構器
⚡️ 個人化
⚡️ 公開的 SDK：TS Delivery SDK、即時預覽工具 SDK、個人化 SDK。

快速設定

使用一個指令將模組安裝到您的 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

這是即時預覽工具的完整 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：即時預覽工具 SDK 的實例。
livePreviewEnabled：是否已啟用即時預覽？
editableTags：我們是否需要用於視覺化建構的可編輯標籤？
Personalize：個人化 SDK 的實例。
variantAlias：要傳遞給 Delivery SDK 的變體清單。

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

Compoasables

此模組提供一個可組合的 useGetEntryByUrl，讓您可以使用 URL 欄位查詢任何條目。它還會監聽即時編輯變更，並根據 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