Nuxtjs-module-amit NPM

contentstack-nuxt-module

The Contentstack Nuxt Module is based on the Contentstack JavaScript SDK along with additional functionality.

Features

Fetch content from multiple stacks
$contentstack available globally

How to Install contentstack-nuxt-module

npm i nuxtjs-module-amit

Setup Needed in `nuxt.config.ts`

Default Setup without Live Preview

import contentstack from 'nuxtjs-module-amit'

export default defineNuxtConfig({
    modules: [
      contentstack
    ],
    contentstack:{
      stackConfigs:[{
        stackName: 'Name of 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

import contentstack from 'nuxtjs-module-amit'

export default defineNuxtConfig ({
    modules: [
      contentstack
    ],
    contentstack:{
      stackConfigs:[{
        stackName: 'Name of the stack',
        apiKey: 'stack_api_key',
        deliveryToken: 'stack_delivery_token',
        environment: 'publishing_environment',
        region: 'stack_region',
        apiHost: 'API host for Live Preview',
        appHost: 'app host for Live Edit',
        managementToken: 'Management Token with readonly access',
        livePreview: true,
        liveEdit: false,
        customHost:'[Optional] use only when custom region is required'
      }]
    }
})

Multiple Stack Support

import contentstack from 'nuxtjs-module-amit'

export default defineNuxtConfig ({
    modules: [
      contentstack
    ],
    contentstack:{
      stackConfigs:[{
        stackName: 'Name of the stack',
        apiKey: 'stack_api_key',
        deliveryToken: 'stack_delivery_token',
        environment: 'publishing_environment',
        region: 'stack_region',
        apiHost: 'API host for Live Preview',
        appHost: 'app host for Live Edit',
        managementToken: 'Management Token with read-only access',
        livePreview: true,
        liveEdit: false,
        customHost:'[Optional] use only when custom region is required'
      },{
        stackName: 'Name of 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 or special characters, for example Master Starter/app expected output would be MasterStarterApp. If the stackName field value is not defined, the expected output would be Stack with index value in increment order, for example, Stack0.
NOTE: If you want to customize the stack region you can add them using customHost, for example, customHost:'cdn.contentstack.io'
NOTE: You can use Live Preview with only 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>