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 DEFAULT_BIGCOMMERCE_CHANNEL = 1;

const storefrontsConfig: MultiStorefrontConfig = {
  default: {
    name: 'Default storefront',
    channelId:
      Number(process.env.DEFAULT_CHANNEL_ID) || DEFAULT_BIGCOMMERCE_CHANNEL
  },
  'my-first-storefront.io': {
    name: 'First storefront',
    channelId: YOUR_FIRST_CHANNEL_ID
  },
  'my-second-storefront.io': {
    name: 'Second storefront',
    channelId: YOUR_SECOND_CHANNEL_ID
  }
};

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

storefronts.

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'
          }
        },
      }
    }
  }
};