注意：这是一个由 @timbenniks 维护的 OSS 项目，而非 Contentstack 团队正式维护的软件包。支持请求可以通过 Github issues 和直接联系 @timbenniks 的渠道提出。

Nuxt Contentstack

用于 Nuxt 的 Contentstack 集成。

特性

⚡️ 轻松设置
⚡️ 查询条目
⚡️ 实时预览 & 可视化构建器
⚡️ 个性化
⚡️ 暴露的 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

组合式函数

此模块提供一个组合式函数 useGetEntryByUrl，允许您使用 URL 字段查询任何条目。它还会监听实时编辑更改，并根据 CMS 中的条目更改刷新您的内容，并且它理解个性化。

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

待办事项

在 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