Vue Storefront is now Alokai! Learn More
Bootstrapping Nuxt

Bootstrapping Nuxt

This guide provides step-by-step instructions for integrating Builder with a Nuxt 3 application. Builder is a powerful dynamic content management system that allows developers to manage, deliver, and optimize content for various digital experiences. By integrating Builder with Nuxt 3, developers can seamlessly incorporate dynamic CMS components into their applications, enhancing both content delivery and user experience.

The Builder integration is exclusive to our Enterprise offering.


Something's missing?

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

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:


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.

Be sure to run the command from the Nuxt project.

In most cases as the Alokai project is a monorepo, you will need to run the command from the apps/web directory.

Here's a brief overview of the directory structure:

├─ apps/
│  ├─ web/              # Nuxt.js application
│  └─ server/           # VSF Middleware application
├─ packages/            # Shared code or components
├─ turbo.json           # Turborepo configuration
└─ package.json         # Project dependencies (monorepo entrypoint)


In a Turborepo (monorepo framework), the apps folder is a key directory where individual applications are stored. This structure helps in maintaining a clear separation of concerns and simplifies dependency management. For a project that includes both a Nuxt application and a server application (acting as middleware or an API), each of these should reside within the apps folder as separate entities.

To scaffold the needed files, run the following command from the root of your Nuxt application:

npx @vsf-enterprise/cms-cli@latest builder nuxt

If you don't have .npmrc file you can always use npm_config_registry flag to specify registry URL.

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

├── schemas
│    └── [component]
|       └── component.json
|           schema.model.json
|       settings.json
├── app
|   └── globals.css
├── builder
|   └── components.ts
├── components
│   └── cms
│       ├── layout
│       │   ├── Footer.tsx
│       │   └── MegaMenu.tsx
│       └── page
│           ├── ... CMS Components 
└── pages
    └── [].tsx

Layouts must be enabled

The builder.vue layout will only take effect when the NuxtLayout component is used within the app.vue component.

  <NuxtLayout />

Installing dependencies

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

You will also need to install other integration dependencies such as supplementary packages related to Storefront UI or agnostic CMS components. Run the following command to install them in your project:

# npm
npm install @storefront-ui/typography @nuxtjs/google-fonts @vsf-enterprise/cms-components-utils
# yarn
yarn add @storefront-ui/typography @nuxtjs/google-fonts @vsf-enterprise/cms-components-utils

Adding the declare.d.ts for TypeScript support in IDE

  1. create a declare.d.ts file in the root of your nuxt app
  2. add the following content to the file:
declare module '';

Adding builder types to tsconfig.json

  "compilerOptions": {
    "types": [""]

Loading fonts

The default Storefront UI setup uses Google Fonts. One way to load these fonts to your project is by installing the @nuxtjs/google-fonts module in your project and adding the following lines to 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 following Storefront UI typography configuration to your Tailwind config file:

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

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

Builder API Key

To fetch data from Builder, and use content rendering capabilities you need to provide your API key. You can find it in your Builder space settings. This key will be passed inside the [...slug].vue page, with the RenderContent component as a prop.

Into your Nuxt config file (nuxt.config.ts) add runtimeConfig:

  // nuxt.config.ts
  // ...
  runtimeConfig: {
    app: {
      builderApiKey: process.env.BUILDER_API_KEY,

Now, in your root application folder create .env file and add your Builder API key.

What next?

Now your Nuxt application has the scaffolding required to display dynamic CMS components. However, it also needs a way to fetch the data from Builder. Proceed to the Middleware and SDK setup guide and learn how to install them.