# Configuring Vue Storefront

Before configuring your Vue Storefront app, it's necessary to configure BigCommerce first. If you haven't

done this yet, see the Configuring BigCommerce guide.

# Set up environment variables

Vue Storefront application is using following environment variables to create a connection with BigCommerce API:

Environment variable Description
BIGCOMMERCE_API_CLIENT_ID Client ID obtained during creating an API account
BIGCOMMERCE_API_CLIENT_SECRET Client secret obtained during creating an API account
BIGCOMMERCE_API_URL API path obtained during creating an API account
BIGCOMMERCE_API_ACCESS_TOKEN Access token obtained during creating an API account
BIGCOMMERCE_STORE_ID store_hash included in API path between /stores/ and /v3/
BIGCOMMERCE_STORE_GUEST_TOKEN Preview code from Review & test your store block
DEFAULT_CHANNEL_ID channel_id of the default storefront
API_BASE_URL Url to the API (See Separate middleware) guide
GRAPHQL_MAX_RETRY Number of allowed retries for graphql requests

# Storefronts configuration

If you're using only one storefront, everything will work just by setting up DEFAULT_CHANNEL_ID environment variable.

In case of using multiple storefronts, you need to configure them in storefronts.config.ts file. Single config entry contains:

  • name - User-friendly name of the storefront. It's being used to create a navigation to other storefronts.
  • channel_id - Id of storefront's channel.
  • protocol - Optional parameter which is set to https by default. It might be useful during development process and testing the navigation.

Key of this entry is a storefront's domain. Vue Storefront app will know which storefront should be used based on this information.

// example storefronts.config.ts


const storefrontsConfig: MultiStorefrontConfig = {
  default: {
    name: 'Default storefront',
  'my-first-storefront.io': {
    name: 'First storefront',
  'my-second-storefront.io': {
    name: 'Second storefront',

See [Multi-storefront overview](../advanced/multi-storefront.md) for more information about using multiple


# Cookies (optional)

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:

customer-data - token cookie


// middleware.config.js
module.exports = {
  integrations: {
    ct: {
      configuration: {
        cookie_options: { // optional cookie options field
          'customer-data': { // cookie name
            httpOnly: true, 
            secure: true,
            sameSite: 'lax'