注意：这是一个由 @timbenniks 开发的开源项目，并非 Contentstack 团队官方维护的软件包。支持请求可以通过 Github 问题和 @timbenniks 的直接渠道提出。

Nuxt Contentstack

Nuxt 的 Contentstack 集成。

特性

⚡️ 简单设置
⚡️ 查询条目
⚡️ 实时预览和可视化构建器
⚡️ 个性化
⚡️ 公开的 SDK：TS Delivery SDK、实时预览 Utils 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 实时预览 Utils 的完整配置。了解更多信息：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：实时预览 Utils 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