Nuxt-module-test 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 contentstack-nuxt-module

Setup needed in `nuxt.config.ts`

Default setup without live preview

export default {
    build: {
    transpile: ['contentstack-module']
   },
    modules: [
      contentstack
    ],
    runtimeConfig: {
      public: {
        contentstack:{
          name: 'Name for the stack',
          apiKey: 'stack_api_key',
          deliveryToken: 'stack_delivery_token',
          environment: 'publishing_environment',
          region: 'stack_region',
          customHost:'optional'
        }
    }
  }
}

Default Setup with Live Preview

export default {
    build: {
    transpile: ['contentstack-module']
   },
    modules: [
      contentstack
    ],
    runtimeConfig: {
      public: {
        contentstack:{
          name: 'Name for the stack',
          apiKey: 'stack_api_key',
          deliveryToken: 'stack_delivery_token',
          environment: 'publishing_environment',
          region: 'stack_region',
          managementToken: 'stack_management_token',
          apiHost:'default api.contentstack.io',
          appHost:'default app.contentstack.com',
          livePreview:true,
          customHost:'optional'
        }
    }
  }
}

Multiple stack support

export default {
    build: {
    transpile: ['contentstack-module']
   },
    modules: [
      contentstack
    ],
    runtimeConfig: {
      public: {
        contentstack: [
        {
          name: 'Name for the stack',
          apiKey: 'stack_api_key',
          deliveryToken: 'stack_delivery_token',
          environment: 'publishing_environment',
          region: 'stack_region',
          managementToken: 'stack_management_token',
          apiHost:'default api.contentstack.io',
          appHost:'default app.contentstack.com',
          livePreview:true,
          customHost:'optional'
        },
        {
          name: 'Name for the stack',
          apiKey: 'stack_api_key',
          deliveryToken: 'stack_delivery_token',
          environment: 'publishing_environment',
          region: 'stack_region',
          customHost:'optional'
        }
      ]
    }
  }
}

NOTE: If you want to set custom url for api host use 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>