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.

Requirements

• Nuxt 3 project,
• Builder environment,
• Node.js version 18.x,
• @vsf-enterprise NPM registry access.

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

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

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

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

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

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
    └── [...page].tsx

<template>
  <NuxtLayout />
</template>

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 @builder.io/sdk-vue @builder.io/sdk @storefront-ui/typography @nuxtjs/google-fonts @vsf-enterprise/cms-components-utils

# yarn
yarn add @builder.io/sdk-vue @builder.io/sdk @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 '@builder.io/sdk-vue/vue3';

Adding builder types to tsconfig.json

{
  "compilerOptions": {
    "types": ["@builder.io/sdk-vue/vue3"]
  }
}

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.