Notice: This is an OSS project by @timbenniks and not an officially maintained package by the Contentstack team. Support requests can come through Github issues and via direct channels to @timbenniks.
Contentstack integration for Nuxt.
- ⚡️ Easy setup
- ⚡️ Query Entries
- ⚡️ Live Preview & Visual builder
- ⚡️ Personalization
- ⚡️ Exposed SDks: TS Delivery SDK, Live preview Utils SDK, Personalize SDK.
Install the module to your Nuxt application with one command:
npx nuxi module add nuxt-contentstack
Or: add to 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',
},
},
general debug dumping the complete settings object into the terminal. Also turns on debug mode in preview SDK.
This is the full Contentstack StackConfig. See: https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/typescript/reference
This is the full Contentstack configuration for Live Preview Utils. Learn more: https://www.contentstack.com/docs/developers/set-up-live-preview/get-started-with-live-preview-utils-sdk
-
enable
: enable personalization -
projectUid
: your personalization peroject UID (to be found in 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');
This module provides a $contentstack
object with:
-
stack
: The Stack object from the Delivery SDK. Query all the things with this. -
ContentstackLivePreview
: The instance of Live Preview Utils SDK. -
livePreviewEnabled
: Was live preview enabled? -
editableTags
: Do we want editable tags fo visual building? -
Personalize
: The instance of Personalize SDK. -
variantAlias
: The variant manifest to pass to the Delivery SDK.
const {
editableTags,
stack,
livePreviewEnabled,
ContentstackLivePreview,
Personalize,
variantAlias
} = useNuxtApp().$contentstack
This module offers a composable useGetEntryByUrl
which allows you to query any entry with a URL field. It also listens to live editing changes and will refresh your content based on entry changes in the CMS, and it understands personalization.
const { data: page } = await useGetEntryByUrl('page', '/about', ['reference.fields'], ['jsonRtePath'], 'en-us')
- Live preview with SSR mode
- Add all regions to the endpoint URL generator
Local development
# 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