Requirements
Running BCMS - you can use live or local BCMS.
Creating a Nuxt project with BCMS
In this tutorial, you will set up a local BCMS with some default data to make it easy for you to follow.
You can create a NextJS project using the BCMS CLI by running bcms --website create. After running the command, you will be prompted to decide on a few options:
For the project name, you can enter anything; you can leave it as default.
When asked to select a framework, select Nuxt.
For "If you want to connect to the BCMS", answer with y (yes). After this, you will be asked which type of BCMS you wish to connect to. Since you are using local BCMS, select
locale, but if you are using a live version, then select Live.Since your NuxtJS project needs an API key to be able to access the data from the BCMS, in the next step, you'll need to select an API key that you would like to use. If you don't have any API key created in your BCMS, CLI will automatically create one. If you do have an API key created already, CLI will let you select one.
After completing the above steps, the CLI will initialize the project and install the necessary dependencies. When the process is done, you can open the project in your favorite code editor (I will use VSCode) and run npm run dev. Now you can open http://localhost:3000 in your browser. π
Project structure
As you can see, this is a typical NuxtJS project. Nothing too fancy. The only new things you might spot there are a few files and folders. Let's see what those files are and their purpose.
./bcms.routes.js- To define a custom API route of the BCMS Most server (by default running on localhost:3001)../bcms- This is a dynamic directory created by the BCMS Most, and it is used for caching data and storing data types from the BCMS. Yes, If you are using TypeScript, GraphQL, or even JSDoc, BCMS got you covered! More about this - later in the text../nuxt.config.js- This is a standard configuration file in every Nuxt.js project, but now, it already contains the BCMS Most configuration, which you can find in themodulessection of the file. Magic!
All other files and folders are vanilla NuxtJS.
How to display data from BCMS on the page?
The best way to explain this is to show you an example. Let's say we have Blog entries in our BCMS, and we want to display one blog post on the path /blog/{blog-slug}.
// File: ./pages/blogs/_slug.vue
<template>
<pre v-if="blog">
{{ blog }}
</pre>
</template>
<script lang="ts">
import Vue from 'vue';
import type { BlogsEntry } from '~/bcms/types';
export default Vue.extend({
async asyncData(ctx) {
const entrySlug = ctx.route.params.slug as string;
const blog = await ctx.$bcms.entry.get({
template: 'blogs',
entry: entrySlug,
});
return { blog };
},
data(): {
blog: BlogsEntry | null;
} {
return {
blog: null,
};
},
});
</script>
BCMS Image - to the rescue!
Let's face it, we all love images on the web. High-quality, sharp ones. But we also love fast websites. Why can't we have both? Well, BCMS Image lets you have both. To simplify handling responsive images and performance optimization, we created the BCMSImage component.
It automatically creates multiple variants of the source image, including WEBP format. Let's see how to use it. Our demo blog (which is available if you are running BCMS locally), has a cover image property. To start, let's import the BCMSImage component and pass the cover_image object.
<template>
<div v-if="blog">
<div v-if="blog.meta.en && blog.meta.en.cover_image">
<BCMSImage :media="blog.meta.en.cover_image" />
</div>
<pre>
{{ blog }}
</pre>
</div>
</template>
If you resize your browser, you'll see that the image size is changing. It's not some CSS magic, but the real image source is changing. If you inspect the image, you'll see that the image source is the same size as it appears on the screen.
Taraaam. You have your blog set up! Congrats! π