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/nuxt @thebcms/types

Set Up the BCMS Configuration

Inside the nuxt.config.ts add the following configuration:

export default defineNuxtConfig({
    
    bcms: {
        orgId: process.env.BCMS_ORG_ID,
        instanceId: process.env.BCMS_INSTANCE_ID,
        privateClientOptions: {
            key: {
                id: process.env.BCMS_API_KEY_ID!,
                secret: process.env.BCMS_API_KEY_SECRET!,
            },
        },
        publicClientOptions: {
            key: {
                id: process.env.NUXT_PUBLIC_BCMS_API_KEY_ID!,
                secret: process.env.NUXT_PUBLIC_BCMS_API_KEY_SECRET!,
            },
        },
    },

    modules: [
        '@thebcms/nuxt',
    ],

});

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

Using BCMS in Nuxt

That's pretty much it. You can now use BCMS like this:

const bcms = useBcmsPrivate();
const blogs = (await bcms.entry.getAll('blog')) as BlogEntry[];

anywhere in your code.

PreviousGatsby.js

NextAstro