0.0.17 • Published 9 months ago

nuxt-contentstack v0.0.17

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

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.

Nuxt Contentstack

npm version npm downloads License Nuxt

Contentstack integration for Nuxt.

Features

  • ⚡️ Easy setup
  • ⚡️ Query Entries
  • ⚡️ Live Preview & Visual builder
  • ⚡️ Personalization
  • ⚡️ Exposed SDks: TS Delivery SDK, Live preview Utils SDK, Personalize SDK.

Quick Setup

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',
  },
},

Options

debug

general debug dumping the complete settings object into the terminal. Also turns on debug mode in preview SDK.

deliverySdkOptions

This is the full Contentstack StackConfig. See: https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/typescript/reference

livePreviewSdkOptions

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

personalizeSdkOptions

  • enable: enable personalization
  • projectUid: your personalization peroject UID (to be found in Contentstack UI)

Personalization examples

// 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');

Provides

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

Compoasables

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')

TODO:

  • Live preview with SSR mode
  • Add all regions to the endpoint URL generator

Contribution

0.0.12

9 months ago

0.0.13

9 months ago

0.0.14

9 months ago

0.0.15

9 months ago

0.0.16

9 months ago

0.0.17

9 months ago

0.0.11

10 months ago

0.0.10

10 months ago

0.0.9

10 months ago

0.0.8

10 months ago

0.0.7

10 months ago

0.0.6

10 months ago

0.0.5

10 months ago

0.0.4

10 months ago

0.0.3

10 months ago