# Installation
To install the Contructor.io module in your Vue Storefront application, run one of the following commands:
npm install @vsf-enterprise/constructor-io @vsf-enterprise/constructor-io-api --save
or:
yarn add @vsf-enterprise/constructor-io @vsf-enterprise/constructor-io-api
# Setup
Inside of the middleware.config.js
file, add the constructor
object to the integrations
:
module.exports = {
integrations: {
constructor: {
location: '@vsf-enterprise/constructor-io-api',
configuration: {
serviceUrl: 'https://ac.cnstrc.com',
apiKey: '<your_app_key>',
apiToken: '<your_app_token>',
securityToken: '<security_token>',
filterPrefix: 'f_',
// Indexes are optional for multiple endpoints to connect to
indexes: [
{
name: 'uk',
serviceUrl: 'https://ac.cnstrc.com/',
apiKey: process.env.CONSTRUCTOR_API_KEY_UK
},
{
name: 'us',
serviceUrl: 'https://ac.cnstrc.com/',
apiKey: process.env.CONSTRUCTOR_API_KEY_US
},
{
name: 'eu',
serviceUrl: 'https://ac.cnstrc.com/',
apiKey: process.env.CONSTRUCTOR_API_KEY_EU
}
]
},
// or
},
// ... other configs
},
},
apiKey - a valid key of index that you want to connect and fetch data from. You can get this key on the
API Integration
page in Constructor.io's Dashboard.apiToken - a valid token to interact with Constructor.io's API. You can generate it on the
API Integration
page in Constructor.io's Dashboard. This key identifies which index will be used.securityToken - a token provided by Constructor.io.
filterPrefix - an optional prefix which will be prepended to filter property names. This prefix allows Constructor.io to return results correctly when a query string includes custom parameters like
gclid
orfbclid
.
Then, in the nuxt.config.js
file register the module:
// nuxt.config.js
{
modules: ['@vsf-enterprise/constructor-io/nuxt'];
}
Finally, add the module to both arrays in the useRawSource
object in the @vue-storefront/nuxt
module:
// nuxt.config.js
['@vue-storefront/nuxt', {
...
useRawSource: {
dev: ['@vsf-enterprise/constructor-io'],
prod: ['@vsf-enterprise/constructor-io'],
}
}],
← Introduction Usage →