Vue Storefront is now Alokai! Learn More
Contentful Setup

Contentful Setup

Go beyond the default Contentful configuration to suit your project's unique needs

Some Storefront Start projects start with a pre-defined configuration for Contentful CMS, but there are instances where you may need to customize this configuration to better suit the unique needs of your project.

Refer to the Alokai Contentful CMS integration documentation for an in-depth information and step-by-step guidance.

Bootstrapping Contentful

Alokai Storefront extends the capabilities of the CMS components supplied by the @vsf-enterprise/cms-cli frontend bootstrappers. To ensure seamless alignment between the Contentful content model and these components, Alokai Storefront includes a tailored Contentful configuration. You can locate this configuration in the contentful/unified-schema.json file for easy reference and integration.

unified-schema.json configuration file includes several predefined values for your convenience:

  • Available languages for fields: en & de
  • Default / fallback language: en.

If your project requires different default values, it becomes necessary to manually update the unified-schema.json file to align it with your specific project requirements.

If you're adjusting the Contentful configuration, such as modifying available languages, it's recommended to update the contentful/unified-schema.json file before importing it into the CMS space. This approach helps prevent conflicts between your project and this reduces manual corrections within the Contentful panel.


To configure your Contentful space with Alokai Storefront, update the Contentful configuration in apps/storefront-middleware app.

  1. Update .env file with your Contentful credentials
### CMS
# Contentful config
CNTF_TOKEN=       # contentful delivery token
CNTF_SPACE=       # contentful space
CNTF_ENVIRONMENT= # contentful env, eg. master
  1. Create a dedicated directory in the integrations directory with the name of the CMS integration. In our case it will be: contentful.
  2. Then create a config.ts file and input the required details.

import type { MiddlewareConfig } from "@vsf-enterprise/contentful-api";
import type { Integration } from "@vue-storefront/middleware";


if (!CNTF_TOKEN) throw new Error("Missing env var: CNTF_TOKEN");
if (!CNTF_SPACE) throw new Error("Missing env var: CNTF_SPACE");
if (!CNTF_ENVIRONMENT) throw new Error("Missing env var: CNTF_ENVIRONMENT");

export const contentfulConfig = {
  location: "@vsf-enterprise/contentful-api/server",
  configuration: {
    token: CNTF_TOKEN,
    space: CNTF_SPACE,
    environment: CNTF_ENVIRONMENT,
} satisfies Integration<MiddlewareConfig>;
  1. Next, create an index.ts file in the same directory as config.ts with such an content:

export * from "./config";
  1. Finally, use this configuration in the middleware.config.ts file. Import the CMS integration file, and add the config into the integrations object.

import dotenv from "dotenv";

import { sapccConfig } from "./integrations/sapcc";
import { contentfulConfig } from "./integrations/contentful";

export const config = {
  integrations: {
    cntf: contentfulConfig,
    commerce: sapccConfig,

Automating TypeScript Type Definitions Generation from Contentful Content Models

Using cf-content-types-generator, you can automate the generation of TypeScript type definitions from the contentful/unified-schema.json file. This tool simplifies the process of creating and maintaining type definitions for your Contentful content models.

Building upon these generated type definitions, you can further enhance your workflow, making interactions with Contentful content not only safer but also more user-friendly.

npx cf-content-types-generator contentful/unified-schema.json --out contentful/types -X

Refer to the cf-content-types-generator documentation for more information about this library.

Exporting custom content models

Whenever changes are made to the content model, it's essential to generate new Type Definitions to accurately reflect these modifications. For detailed instructions on exporting content and generating the required Type Definitions, please consult the Contentful CLI documentation.