Getting Started with Nuxt.js and BCMS

This guide will walk you through integrating BCMS with a Nuxt project. Let’s get started!

The quickest way to go from scratch to a simple Nuxt blog with BCMS is by running the following command locally:

npx @thebcms/cli create nuxt starter simple-blog

Follow the prompts as they appear.

Running this command will:

Set up a new BCMS project
Populate it with sample content
Scaffold a Nuxt project locally
Create an .env file and update your project with the required BCMS configuration

Once completed, simply run:

npm install
npm run dev

If you prefer a detailed, step-by-step approach, continue below:

Open Your BCMS Project

Head to https://app.thebcms.com and open your BCMS project. Ensure you have entries in your project so you can fetch data and display it in Nuxt.js. For example, create a Blog template and add a Cover Image media property.

Create a Blog Entry

Create a new blog entry titled My First Blog, add a cover image, and write some content.

Generate an API Key

Navigate to Administration > Settings > API Keys. Create a new API key. Keep this page open, as you’ll need the API key information in the next steps. Ensure the key has permission to fetch entries from the Blog template.

Set Up Your Nuxt.js Project

Open your terminal and create a new Nuxt.js project using the Nuxt.js starter:

npx nuxi@latest init <project-name>

Once the project is created, open it in your code editor.

Install BCMS Packages

Install the necessary BCMS packages:

npm i --save @thebcms/cli @thebcms/types @thebcms/utils @thebcms/client @thebcms/components-vue

Update Scripts in package.json

Modify the scripts section in package.json to include the following commands:

The bcms --pull types --lng ts command runs the BCMS CLI to pull types from BCMS and store them in /bcms/types/. These types are compatible with both JavaScript and TypeScript.

{
   "scripts":{
      "build":"bcms --pull types --lng ts && nuxt build",
      "dev":"bcms --pull types --lng ts && nuxt dev",
      "generate":"bcms --pull types --lng ts && nuxt generate",
      "preview":"bcms --pull types --lng ts && nuxt preview",
      "postinstall":"bcms --pull types --lng ts && nuxt prepare"
   }
}

Configure TypeScript (Optional)

If you are using TypeScript, open tsconfig.json and update the moduleResolution to Node:

{
   "extends":"./.nuxt/tsconfig.json",
   "compilerOptions":{
      "moduleResolution":"Node"
   }
}

Set Up the BCMS Configuration

Create a new file in the root of your project called bcms.config.cjs and add the following configuration:

module.exports = {
  client: {
    orgId: "YOUR_PROJECT_ORG_ID",
    instanceId: "YOUR_PROJECT_INSTANCE_ID",
    apiKey: { id: "API_KEY_ID", secret: "API_KEY_SECRET" },
  },
};

You can find the required information on the API key page you generated earlier.

Initialize BCMS Client

In the root of your project, create a file called bcms.ts and initialize the BCMS client:

import { Client } from "@thebcms/client";
export const bcms = new Client(
  "ORG_ID",
  "INSTANCE_ID",
  {
    id: "API_KEY_ID",
    secret: "API_KEY_SECRET",
  },
  {
    injectSvg: true,
  }
);

Fetch and Display Data in Nuxt.js

Now that BCMS is configured, open /app.vue and fetch the blog data from BCMS to display it on your page:

<template>
  <div>
    <div v-for="(blog, blogIdx) in blogs" :key="blogIdx">
      <BCMSImage :media="blog.meta.cover_image" :client="bcms" />
      <BCMSContentManager :items="blog.content" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { bcms } from "~/bcms";
import type { BlogEntry, BlogEntryMetaItem } from "~/bcms/types/ts";
import type { EntryContentParsedItem } from "@thebcms/client/types";
import { BCMSContentManager, BCMSImage } from "@thebcms/components-vue";
const result = await useAsyncData(async () => {
  const entries = await bcms.entry.getAll('blog') as BlogEntry[];
  return entries.map(entry => {
    return {
      meta: entry.meta.en as BlogEntryMetaItem,
      content: entry.content.en as EntryContentParsedItem[]
    };
  });
});
const blogs = result.data;
</script>

That’s it—happy coding!

PreviousGatsby.js

NextAstro