透過 100+ 個訣竅學習 Nuxt！
56.4K

contentstack
nuxt-contentstack

Nuxt 的 Contentstack 整合
41 次下載
2 個星號
v0.0.17
timbennikstimbenniks

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

Nuxt Contentstack

npm versionnpm downloadsLicenseNuxt

Nuxt 的 Contentstack 整合。

功能

  • ⚡️ 輕鬆設定
  • ⚡️ 查詢條目
  • ⚡️ 即時預覽 & 可視化建構器
  • ⚡️ 個人化
  • ⚡️ 公開的 SDK：TS Delivery SDK、Live preview Utils SDK、Personalize 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

一般 debug 將完整的設定物件傾印到終端機。也會在預覽 SDK 中開啟 debug 模式。

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

可組合項

這個模組提供了一個 composable 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