# Configuration

The commercetools integration for Vue Storefront is configured with two files. We explain both of them in detail below, showing all possible configuration options.

# Nuxt configuration

In the nuxt.config.js file, you can configure properties affecting the frontend portion of your application, such as localization and search options visible to the user and send to the server.

# `i18n` (optional)

The i18n object controls the localization configuration. By default, it only has one property:

useNuxtI18nConfig: boolean - controls whether to load i18n configuration object in root of the nuxt.config.js file or i18n configuration of this package.

However, if you remove useNuxtI18nConfig or set it to false, you can configure localization options in this object.

You can read more about this on the Internationalization (opens new window) page.

// nuxt.config.js

export default {
  buildModules: [
    ['@vsf-enterprise/commercetools/nuxt', {
      i18n: {
        useNuxtI18nConfig: true
      }
    }]
  ]
};

# `faceting` (required)

The faceting object controls search options available to the user, such as pagination, sorting, available filters, etc. You can see a list of available options in the Configuration page of the useFacet composable.

// nuxt.config.js

export default {
  buildModules: [
    ['@vsf-enterprise/commercetools/nuxt', {
      faceting: {} // See the link above for details
    }]
  ]
};

# Server Middleware configuration

In the middleware.config.js file, you can configure the commercetools SDK, Apollo client, and integration extensions. It includes URLs, secret keys, custom GraphQL queries, and custom API endpoints.

You can read more about this on the Server Middleware (opens new window) page.

# Prerequisite

To configure this file, you need two API clients. We explained how to create them with proper permissions on the Project Setup page.

# `api` (required)

The api object contains the information necessary to request data from the commercetools GraphQL API and request user access tokens. Values for all these options are displayed after Creating an API Client (opens new window).

Be careful about user permissions Access tokens requested for visitors will have permissions defined in

the scopes array. You should be careful not to include scopes starting with manage_ because those allow changing store configuration. However, scopes starting with manage_my are safe because they allow to change the user-specific configuration, such as profile information or saved addresses.

// middleware.config.js

module.exports = {
  integrations: {
    ct: {
      location: '@vsf-enterprise/commercetools-api/server',
      configuration: {
        api: {
          uri: '',
          authHost: '',
          projectKey: '',
          clientId: '',
          clientSecret: '',
          scopes: [
            // Replace all "<PROJECT_KEY>"
            'create_anonymous_token:<PROJECT_KEY>',
            'view_categories:<PROJECT_KEY>',
            'view_published_products:<PROJECT_KEY>',
            'view_stores:<PROJECT_KEY>',
            'manage_my_profile:<PROJECT_KEY>',
            'manage_my_orders:<PROJECT_KEY>',
            'manage_my_payments:<PROJECT_KEY>',
            'manage_my_shopping_lists:<PROJECT_KEY>'
          ]
        }
      }
    }
  }
};

uri - URL of the commercetools GraphQL API.
authHost - URL of the commercetools authentication server. For the list of available URLs, see the Authorization (opens new window) page.
projectKey - the name of your commercetools project.
clientId - unique ID specific to the API client.
clientSecret - unique secret string specific to the API client.
scopes - list of user permissions. For the list of available scopes and their descriptions, see the Scopes (opens new window) page.

Scopes update After changing the configuration of scopes in commercetools, cookies already created for users

will still include the old scope.

# `serverApi` (required)

The serverApi object contains the information necessary to request data from the commercetools GraphQL API with elevated permissions that users should not have.

Some operations that require such permissions are:

resetting user password, which requires the manage_customers scope,
adding product reviews, which requires the manage_products scope.

To not duplicate the configuration, the uri, authHost, and projectKey properties from the api object are used to request access tokens. These access tokens are only stored on the server and not sent to the user.

Values for all these options are displayed after Creating an API Client (opens new window).

// middleware.config.js

module.exports = {
  integrations: {
    ct: {
      location: '@vsf-enterprise/commercetools-api/server',
      configuration: {
        serverApi: {
          clientId: '',
          clientSecret: '',
          scopes: [
            // Replace all "<PROJECT_KEY>"
            'manage_customers:<PROJECT_KEY>',
            'manage_products:<PROJECT_KEY>'
          ],
          operations: []
        }
      }
    }
  }
};

clientId - unique ID specific to the API client.
clientSecret - unique secret string specific to the API client.
scopes - list of elevated server permissions. For the list of available scopes and their descriptions, see the Scopes (opens new window) page.
operations - list of GraphQL operations for which the server access token will be used. Here are some of the predefined operations:
- customerResetPassword,
- customerCreatePasswordResetToken,
- createReview,
- reviews.

# `inventoryMode` (optional)

Commercetools offers a few ways of tracking the inventory, which affects product availability. Three possible values are:

TrackOnly,
ReserveOnOrder,
None.

To learn more, see the InventoryMode documentation (opens new window).

// middleware.config.js

module.exports = {
  integrations: {
    ct: {
      location: '@vsf-enterprise/commercetools-api/server',
      configuration: {
        inventoryMode: 'TrackOnly'
      }
    }
  }
};

# `acceptLanguage` (optional)

An array of supported locales. Values in the array should match codes of the languages configured on the Project settings page, under the International tab in Merchant Center.

// middleware.config.js

module.exports = {
  integrations: {
    ct: {
      location: '@vsf-enterprise/commercetools-api/server',
      configuration: {
        acceptLanguage: [
          'en-US',
          'de-DE',
          'pl-PL'
        ]
      }
    }
  }
};

# `languageMap` (optional)

An object used to map a locale to the accepted languages.

// middleware.config.js

module.exports = {
  integrations: {
    ct: {
      location: '@vsf-enterprise/commercetools-api/server',
      configuration: {
        languageMap: {
          'en-gb': ['en-gb', 'en-us'],
          'en-us': ['en-us', 'en-gb'],
        }
      }
    }
  }
};

# Localization and cookies (optional)

The server loads localization settings, such as currency, locale, country, and store from cookies. To change the name of the cookies or default values (used if cookies don't exist), use the options listed below.

// middleware.config.js

module.exports = {
  integrations: {
    ct: {
      location: '@vsf-enterprise/commercetools-api/server',
      configuration: {
        currencyCookieName: '',
        localeCookieName: '',
        countryCookieName: '',
        storeCookieName: '',
        currency: '',
        locale: '',
        country: '',
        store: ''
      }
    }
  }
};

Some cookies are set by the middleware server and are out of the theme scope, therefore we introduce the possibility to customize its options. To override the default cookie options you must use the cookie name as a key and CookieOptions as a configuration object. The list of cookies set by the server:

vsf-commercetools-token - token cookie

// middleware.config.js

module.exports = {
  integrations: {
    ct: {
      location: '@vsf-enterprise/commercetools-api/server',
      configuration: {
        cookie_options: { // CookieOptions
          'vsf-commercetools-token': {
            httpOnly: true,
            secure: true,
            sameSite: 'lax'
          }
        },
      }
    }
  }
};

# Getting Project Settings from commercetools (optional)

You can fetch Project Settings data like locales, currencies, and countries directly from commercetools.

For that you should Create an API Client (opens new window), then select Project Settings checkbox in the View column and add view_project_settings:<PROJECT_NAME> to the serverApi scope in the middleware.config.js.

Then in the terminal, go to the Vue Storefront project directory and start command:

yarn settings

After that you'll get two files: defaultI18nSettings.js and generatedI18nSettings.js.

defaultI18nSettings.js - file contains default i18n settings.
generatedI18nSettings.js - file created with template based on Project Settings from commercetools.

However, it is important to check all data like:

package/theme/scripts/generatedI18nSettings.js:
- currency,
- country,
- countries: { ...country, states: [ <STATE> ] },
- defaultLocale,
- vueI18n
packages/theme/lang - cointains all required language file with translations.
packages/theme/static/icons/langs - contains all required flag icons.

After that you can put proper config in the nuxt.config.js file.

// nuxt.config.js
const config = {
  ...
    i18n
:
generatedI18nSettings,
}

If everything is ok, you can start the application.

yarn dev

# Store Redirection based on domains (optional)

The Store Redirection is an optional feature that allows you to redirect between stores based on different subdomains. The default implementation of The Store Redirection displays a list of commercetools stores (opens new window).

For that you should Create an API Client (opens new window), then select Project Settings checkbox in the View column and add view_stores:<PROJECT_NAME> to the serverApi scope in the middleware.config.js. Also remember to add other permissions used in your project.

Then go into packages/theme/scripts. You have storesConfig.json file containing the information you need to fill in:

// scripts/storesConfig.json

{
  "domains": [
    {
      "key": "<KEY>",
      // key of your store
      "domain": "<YOUR_DOMAIN>",
      // change to your domain name eg. brand.vuestorefront.io
      "brand": "<BRAND_NAME>",
      // set brand name (visible in StoreLocaleSelector.vue component)
      "protocol": "<PROTOCOL>"
      // set protocol to http or https
    }
    // if more stores are added in CT Merchant Center, those should be added below
  ],
  "defaultStore": "<KEY>"
}

After that, in the terminal, go to the Vue Storefront project directory and start command:

yarn stores

Then you need to do a few additional configuration steps:

import the generatedStores.js as a stores and put it into @vsf-enterprise/commercetools/nuxt
set enableMultiDomain to true

// nuxt.config.js

import stores from './scripts/generatedStores';

const config = {
  ...
    buildModules
:
[
  ...
    ['@vsf-enterprise/commercetools/nuxt', {
      ...
        enableMultiDomain
:
true,
...
stores
}]
]
}

set CLICK_COLLECT_ENABLED environment to true.

//.env

CLICK_COLLECT_ENABLED = true

Start the application.

yarn dev

← Project setup

Authentication →

# Configuration

# Nuxt configuration

# i18n (optional)

# faceting (required)