SDK setup

The last step in the installation process is configuring Vue Storefront SDK for Bloomreach Content in your frontend application. It will provide you with handy utility functions responsible for resolving raw data from Bloomreach.

Before following along, make sure you've read either of the bootstrapping guides: for Nuxt or Next.

Now you are going to install some dependencies and create a few files. If your project follows a standard directory structure (e.g. the default one for Nuxt or Next), simply add the files in the root of your project. If it has separate directories for frontend and backed code, add the files in the root of the frontend directory.

Key concept - SDK

SDK is described in detail in our Key concepts: SDK docs.

Start with installing the @vue-storefront/sdk package.

yarn add @vue-storefront/sdk

Next, install the Bloomreach Content SDK module. It extends the SDK core with handy utility methods responsible for working with raw data form Bloomreach.

yarn add @vsf-enterprise/bloomreach-content-sdk

With both libraries in place, create a new sdk.config.ts file. Use it to initialize the SDK and configure the Contentful module. apiUrl should point to the address of your Server Middleware you spun up at the end of the previous section.

import { initSDK, buildModule } from '@vue-storefront/sdk';
import { BloomreachContentModuleType, bloomreachContentModule } from '@vsf-enterprise/bloomreach-content-sdk';

const sdkConfig = {
  bloomreachContent: buildModule<BloomreachContentModuleType>(bloomreachContentModule),

export const sdk = initSDK(sdkConfig);

Now your SDK is ready for take off as well. To see a full list of available methods, check out the API Reference.

What next?

That's it. Your frontend application is ready for take off. Run it locally and start working on your components right away!