Getting started with Nuxt.js and BCMS

This is the Nuxt.js plugin documentation for the BCMS. Let's start!

• Open your BCMS project on https://app.thebcms.com
• Make sure that you have some Entries in the BCMS project so that we can fetch data and display it in Nuxt.js. For example, you can create a Template called Blog and add Media property called Cover image.

• Now you can create a new Blog entry with title My First Blog, add some cover image to it and add lorem ipsum content.

• Navigate to Administration/Settings/Api keys
• Here you can create a new Api key. After you've created the key, leave the page opened because we will need Api key information in next steps.
• Make sure that Key can get Entries from Blog Template (see image bellow).

• After this, open your terminal of choice and create a new Nuxt.js project using Nuxt.js starter: npx nuxi@latest init <project-name>
• Open the project in your code editor.
• Install BCMS related packages with: npm i --save @thebcms/cli @thebcms/types @thebcms/utils @thebcms/client @thebcms/components-vue
• Open package.json and modify scripts to look like in example bellow:

"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"
},

• You can see that we've added bcms --pull types --lng ts. This command will start BCMS CLI and pull types from the BCMS and store them in /bcms/types/*. Generated types are valid for JavaScript and TypeScript.

• If you are using TypeScript, open tsconfig.json and set moduleResolution to Node:

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "moduleResolution": "Node"
  }
}

• Create new file in the root of the project called bcms.config.cjs and add CLI configuration like shown bellow:

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

• All information for this configuration can be found on Api key page (page on which you've created an Api key in previous steps).
• One more thing and we are ready to fetch our blogs. In root of the project create a new file called bcms.ts. Inside of it we will initialize BCMS Client and expose it so that we can use it inside of the pages.

import { Client } from "@thebcms/client";

// All values are same as in `bcms.config.cjs`
export const bcms = new Client(
    "ORG_ID",
    "INSTANCE_ID",
    {
        id: "API_KEY_ID",
        secret: "API_KEY_SECRET",
    },
    {
        injectSvg: true,
    },
);

• Now we can go to /app.vue, fetch data from the BCMS project and display it on the 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[];
  // Map entry to meta and content for English
  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!