nuxt-module-amit

contentstack-nuxt-module

Contentstack Nuxt Module is based on Contentstack javascript sdk along with additional functionality.

Features

• [x] Allow you to fetch content from multiple stacks
• [x] Make this.contentstack available globally

How to install contentstack-nuxt-module

npm i @nuxtjs/contentstack-module

Setup needed in nuxt.config.ts

Default setup without live preview

export default {
    modules: [
      contentstack
    ],
    contentstack:{
      stackConfig:[{
        name: 'Name for the stack',
        apiKey: 'stack_api_key',
        deliveryToken: 'stack_delivery_token',
        environment: 'publishing_environment',
        region: 'stack_region',
        customHost:'optional use only when custom region is required'
      }]
    }
}

Default Setup with Live Preview

export default {
    modules: [
      contentstack
    ],
    contentstack:{
      stackConfig:[{
        name: 'Name for the stack',
        apiKey: 'stack_api_key',
        deliveryToken: 'stack_delivery_token',
        environment: 'publishing_environment',
        region: 'stack_region',
        apiHost: 'api host api for live preview',
        appHost: 'app host for live edit',
        managementToken: 'management token with readonly accesses',
        livePreview: true,
        liveEdit: false,
        customHost:'optional use only when custom region is required'
      }]
    }
}

Multiple stack support

export default {
    modules: [
      contentstack
    ],
    contentstack:{
      stackConfig:[{
        name: 'Name for the stack',
        apiKey: 'stack_api_key',
        deliveryToken: 'stack_delivery_token',
        environment: 'publishing_environment',
        region: 'stack_region',
        apiHost: 'api host api for live preview',
        appHost: 'app host for live edit',
        managementToken: 'management token with readonly accesses',
        livePreview: true,
        liveEdit: false,
        customHost:'optional use only when custom region is required'
      },{
        name: 'Name for the stack',
        apiKey: 'stack_api_key',
        deliveryToken: 'stack_delivery_token',
        environment: 'publishing_environment',
        region: 'stack_region',
        customHost:'optional use only when custom region is required'
      }]
    }
}

NOTE: If stackName field contains spaces special characters for example Starter/app expected output would be StarterApp. If no value is added in stackName field expected output would be Stack1.

NOTE: If you want to custom region stack with can add them using customHost example customHost:'cdn.contentstack.io'

NOTE: Live preview can only be applicable to one stack instance at a time.

Usage

Add the following script to your .vue file and use it in your template.

<script setup>
const { $contentstack } = useNuxtApp()
await $contentstack?.NameForStack.stack.ContentType('contentTypeUID').Query().toJSON().find()
</script>

Docs to reference

• Create Delivery token
• Create Management Token
• How to setup Live preview
• Contentstack javascript SDk
• Api end points for apiHost and customHost