Setup for Nuxt

By default, the Alokai integration with Bloomreach Content is meant to be used with our Alokai Storefront solution. However, if you want to use it with a pure Nuxt 3 application, this guide explains how to get started.

Requirements

• Nuxt 3 project with nuxt version 3.4.0 or higher,
• Bloomreach Content environment,
• Node.js version 18.x,
• @vsf-enterprise NPM registry access.

Creating .npmrc file

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

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

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

npx @vsf-enterprise/cms-cli bloomreach-content:components -f 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
  │       │   ├── CategoryCard.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

Enabling layouts

The bloomreach.vue layout will be applied only if the NuxtLayout component is used within the app.vue component. Ensure that your setup includes this.

<template>
  <NuxtLayout />
</template>

Installing dependencies

The integration uses dependencies such as SDKs provided by Bloomreach, axios and supplementary packages related to Storefront UI, our Bloomreach Content SDK or agnostic CMS components. Run the following command to install them in your project:

npm

npm install @bloomreach/spa-sdk @bloomreach/vue3-sdk axios @vsf-enterprise/cms-components-utils @nuxtjs/google-fonts @vue-storefront/sdk @vsf-enterprise/bloomreach-content-sdk @nuxt/image && npm install --save-dev typescript @vue-storefront/nuxt @storefront-ui/typography

yarn

yarn add @bloomreach/spa-sdk @bloomreach/vue3-sdk axios @vsf-enterprise/cms-components-utils @nuxtjs/google-fonts @vue-storefront/sdk @vsf-enterprise/bloomreach-content-sdk @nuxt/image && npm install -D typescript @vue-storefront/nuxt @storefront-ui/typography

Loading Storefront UI

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

Loading Google Fonts

The default Storefront UI setup uses Google Fonts. In the Installing dependencies section, you've already installed the @nuxtjs/google-fonts module in your project. Now, register it in your nuxt.config.ts:

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 Storefront UI typography plugin to your Tailwind config file:

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

export default {
  // ...
  plugins: [sfTypography],
};

Loading Nuxt Image

In the Installing dependencies section, you've already installed the @nuxt/image module in your project. Now, register it in your nuxt.config.ts:

export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    '@nuxt/image'
  ]
});

Configuring Bloomreach Content

The next step is adding the bloomreachContent configuration in the runtimeConfig 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.

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

// bloomreach.vue

- const { environmentName, channel } = useRuntimeConfig().public.bloomreachContent;
+ const { environmentName } = useRuntimeConfig().public.bloomreachContent;
+ const { locale: channel } = useI18n();

Configuring Alokai SDK

The last step in the process is configuring Alokai SDK for Bloomreach Content in your front-end application. It will provide you with handy utility functions responsible for resolving raw data from Bloomreach.

In the root of your project, create a new sdk.config.ts file with the following content:

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

export default defineSdkConfig(
  ({ buildModule }) => ({
    bloomreachContent: buildModule<BloomreachContentModuleType>(bloomreachContentModule),
  }),
);

Next, register the @vue-storefront/nuxt module in your nuxt.config.ts. It will expose a global useSdk function which is used by some of the Bloomreach Content integration components (e.g. BRXComponent).

export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    '@vue-storefront/nuxt',
  ]
});

Finally, set the verbatimModuleSyntax to false in your tsconfig.json file. We need it so that we don't get errors from integration components that don't use the import type.

{
  // ...
  "compilerOptions": {
    // ...
    "verbatimModuleSyntax": false
  }
}

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

What next?

With your frontend configured, the last thing to do is Bootstrapping your Bloomreach Content environment.