Vue Storefront is now Alokai! Learn More
Setup for Nuxt

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

Something's missing?

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

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.

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: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'
      }
    }
  }
});

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 your application's i18n setup so that it can be dynamically evaluated at runtime.

// 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.

Key concept - SDK

SDK core is described in detail in our SDK docs.

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.