# Configuration

Commercetools configuration is located in two places:

  • nuxt.config.js is a place where you're configuring properties related only to the frontend part of your application.

  • middleware.config.js is a place where you're configuring the Commercetools SDK, Apollo and extensions. You will put there API keys, integration configurations, custom GraphQL queries and new API endpoints.

# Nuxt Commercetools configuration

// nuxt.config.js
['@vue-storefront/commercetools/nuxt', {
  i18n: {
    useNuxtI18nConfig: true
  }
}]
  • useNuxtI18nConfig - when enabled, @vue-storefront/commercetools/nuxt package will use i18n config object provided in nuxt.config.js. Otherwise, the i18n config should be passed directly to this package configuration. You can read more about it on Internationalization page. There are things specific to commercetools, which you can read more about below.

# Adding available states to the country in Checkout and MyAccount

In order to add a new state, add states field in the desired country inside i18n.countries in nuxt.config.js:

i18n: {
  countries: [
    { name: 'US',
      label: 'United States',
      states: [
        'California',
        'Nevada'
      ]
    },
    // ...
  ]
}

Each state requires the tax rules

A state without tax rules cannot work properly. Make sure to add the tax rules for each state in the commercetools as described here (opens new window).

If you select United States, after applying tax rules, there will be 2 states available. You can now select them on Checkout's shipping and billing steps and MyAccount's user shipping and billing address views.

comercetools states on my account

comercetools states on the checkout

# How to access states?

You can access states by using useVSFContext:

import { useVSFContext } from '@vue-storefront/core';

export default {
  setup () {
    const { $ct: { config: { countries } } } = useVSFContext();
    const { states } = countries.find(country => country.name === 'US');
    
    return {
      statesInUS: states // ['California', 'Nevada']
    }
  }
}

# Middleware Commercetools configuration

You can read more about middleware configuration in Vue Storefront here

// middleware.config.js
module.exports = {
  integrations: {
    ct: {
      location: '@vue-storefront/commercetools-api/server',
      configuration: {
        api: {
          uri: 'https://<DOMAIN_NAME>.com/<PROJECT_KEY>/graphql',
          authHost: 'https://auth.sphere.io',
          projectKey: '<PROJECT_KEY>',
          clientId: '<CLIENT_ID>',
          clientSecret: '<CLIENT_SECRET>',
          scopes: [
            'manage_products:<PROJECT_KEY>',
            /* other scope rules */
          ]
        }
      }
    }
  }
};

# api

By default, the internationalization settings, such as currency, locale, and country are loaded from cookies. To override this behavior you can set those properties inside the configuration section.

// middleware.config.js
module.exports = {
  integrations: {
    ct: {
      location: '@vue-storefront/commercetools-api/server',
      configuration: {
        api: { /* ... */}
        currency: 'EUR',
        locale: 'en',
        country: 'US'
      }
    }
  }
};


### `acceptLanguage`

An array of possible locales Commercetools will use. You can read more about Commercetools internationalization configuration [here](https://docs.commercetools.com/api/projects/orders-import#language-filtering)

```js
acceptLanguage: ['en-gb', 'en-us']

# languageMap

If you supply a languageMap during setup this will be used to map a locale to the accepted languages.

languageMap: {
  'en-gb': ['en-gb', 'en-us'],
  'en-us': ['en-us', 'en-gb'],
}