The Vue Storefront Essentials Course is now available! 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 VSF Contentful CMS integration documentation for an in-depth information and step-by-step guidance.

Bootstrapping Contentful

Storefront Starter 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, Storefront Starter 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 the reduces manual corrections within the Contentful panel.


To configure your Contentful space with Storefront Starter, 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
  1. Update the middleware.config.ts and set active Contentful environment.
// middleware.config.ts

const config = {
  integrations: {
    cntf: {
      location: "@vsf-enterprise/contentful-api/server",
      configuration: {
        token: CNTF_TOKEN,
        space: CNTF_SPACE,
        environment: getContentfulEnvironment(INTEGRATION),                   environment: /* Contentful environment id, e.g. "master" */,        },

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.