Nuxt-module-amit NPM

contentstack-nuxt-module

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

Features

Allow you to fetch content from multiple stacks
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>