Setup for Nuxt

This documentation explains how to get started with the integration in a Nuxt 3 application.

Requirements

Something's missing?

If you don't have a Nuxt 3 project yet, create one by following the official guide (opens new window). If you don't have a Bloomreach Content environment yet, we suggest you get in touch with Bloomreach and request a demo (opens new window).

Creating .npmrc file

In order to start working with our enterprise packages, add a .npmrc file with the following content to the root of your repository:

@vsf-enterprise:registry=https://registrynpm.storefrontcloud.io

Importing integration files

Vue Storefront ships with a CLI tool for CMS integrations which will import all of the frontend acceleration files into your project.

The CLI tool has been tested with a fresh Nuxt 3 project.

To use the CLI, simply run the following command from the root of your project:

npx @vsf-enterprise/cms-cli bloomreach-content nuxt

This will create (or overwrite) the following files in your project:

├── components
│   └── cms
│       ├── layout
│       │   ├── Footer.vue
│       │   └── MegaMenu.vue
│       ├── page
│       │   ├── Accordion.vue
│       │   ├── Banner.vue
│       │   ├── Card.vue
│       │   ├── Editorial.vue
│       │   ├── Gallery.vue
│       │   ├── Grid.vue
│       │   ├── Hero.vue
│       │   ├── NewsletterBox.vue
│       │   ├── ProductCard.vue
│       │   └── Scrollable.vue
│       └── wrappers
│           ├── BRXComponent.vue
│           └── RenderComponent.vue
├── layouts
│   └── bloomreach.vue
├── pages
│   └── [...slug].vue
├── plugins
│   └── bloomreach-vue-sdk.ts
└── schemas
    ├── component-groups
    │   └── ...
    ├── components
    │   └── ...
    ├── content-types
    │   └── ...
    ├── folders
    │   └── ...
    ├── index.ts
    ├── layouts
    │   └── ...
    ├── menus
    │   └── ...
    └── synchronize.ts

Layouts must be enabled

The bloomreach.vue layout will only take effect when the NuxtLayout (opens new window) component is used (opens new window) within the app.vue (opens new window) component.

<template>
  <NuxtLayout />
</template>

Installing dependencies

The UI layer of the integration relies on Storefront UI and its dependencies. Follow the official guide (opens new window) to install the library in your project.

You will also need to install other integration dependencies such as SDKs (opens new window) provided by Bloomreach, axios (opens new window) and supplementary packages related to Storefront UI or agnostic CMS components. Run the following command to install them in your project:

# npm
npm install @bloomreach/spa-sdk @bloomreach/vue3-sdk axios -D @storefront-ui/typography @vsf-enterprise/cms-components-utils @nuxtjs/google-fonts

# yarn
yarn add @bloomreach/spa-sdk @bloomreach/vue3-sdk axios -D @storefront-ui/typography @vsf-enterprise/cms-components-utils @nuxtjs/google-fonts

Loading fonts

The default Storefront UI setup uses Google Fonts. One way to loading these fonts to your project is by installing the @nuxtjs/google-fonts (opens new window) module in your project and adding the following lines to your nuxt.config.ts (opens new window):

export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    ['@nuxtjs/google-fonts', {
      families: {
        'Red Hat Display': [400, 500, 700],
        'Red Hat Text': [300, 400, 500, 700]
      }
    }]
  ]
});

To complete the fonts setup, add the following Storefront UI typography (opens new window) configuration to your Tailwind config (opens new window) file:

import sfTypography from '@storefront-ui/typography';

export default {
  // ...
  plugins: [sfTypography],
  theme: {
    fontFamily: {
      sans: 'Red Hat Text, sans-serif',
    }
  }
};

Configuration

The last step is adding the bloomreachContent configuration in the runtimeConfig (opens new window) object of your nuxt.config.ts file. It should contain the name of your Bloomreach Content environment and the name of the channel you want to fetch the data from Both properties are used by the useBloomreachContent composable to configure the HTTP client.

export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    public: {
      bloomreachContent: {
        environmentName: 'vuestorefront',
        channel: 'en'
      }
    }
  }
});

Good to know

Keeping those properties in the main framework configuration file can be considered a good practice but is not mandatory. Especially with the channel property - most likely you will want to bind it with you application's i18n setup. In such a case, the channel would be dynamically evaluated at runtime within the useBloomreachContent composable.

What next?

Now your frontend application has the scaffolding required to display dynamic CMS components. However, there is one more thing left - setting up Vue Storefront's SDK for Bloomreach Content.

← Introduction
Bootstrapping Next →