Multilingual CMS guide: How to create a multilingual project with BCMS

Imagine landing on a promising website, only to realize you can’t understand a word of it. Frustrating, right?

Now, think about how many potential customers might bounce off your site for the same reason. Studies show that 76% of consumers are more likely to purchase products or services if the information is presented in their native language. Yet, many businesses still overlook this critical factor, leaving money and opportunities on the table.

If your website or application speaks only one language, you’re not just missing out, you’re actively pushing people away. This is why a multilingual CMS isn’t just a nice-to-have, it’s a necessity.

What is a Multilingual CMS?

A multilingual content management system allows you to manage and serve content in multiple languages.

Instead of maintaining separate websites for each language, a multilingual CMS centralizes content management so you can create, edit, and distribute translated content from one place. It allows for language variations of text, images, and other media, ensuring users receive content in their native language.

Why use a Multilingual CMS?

Better user experience: Studies show that 76% of online shoppers prefer to buy from websites that provide content in their native language, and 40% refuse to purchase if a site isn’t translated (CSA Research). A multilingual content management systems ensure users feel comfortable and engaged, leading to higher conversions and customer satisfaction.
Multilingual SEO benefits: Search engines treat each language version of your site as a separate indexed page. If properly structured, this allows you to rank in multiple regions, increasing organic traffic. A key part of this is Hreflang tags, which signal to Google which language version to display to users based on their location and preferences. Without these tags, search engines might serve the wrong version of your site, leading to poor user experience and lower rankings.
Efficient CMS support: Instead of manually updating multiple language versions separately, a multilingual CMS centralizes content, ensuring consistency across translations. This reduces redundancy and minimizes errors, making content updates seamless.
Consistency: A multilingual CMS ensures your brand’s voice and messaging remain uniform across all languages, preventing mistranslations or inconsistencies that could confuse or alienate users.
Competitive advantage in global markets: Companies that offer multilingual content gain a competitive edge in international markets. Many businesses still rely solely on English, limiting their reach. By providing content in multiple languages, businesses can outperform competitors and establish a strong presence in non-English-speaking markets.
Legal and compliance benefits: In some regions, offering content in the local language is not just beneficial, it’s required by law. Countries like Canada, Belgium, and Switzerland have strict language regulations that require websites to provide content in multiple official languages. A multilingual CMS ensures compliance with these regulations, preventing potential legal issues and making websites more accessible.
Higher customer retention: Customers are more likely to return to a website that supports their language preferences. A multilingual support allows businesses to provide ongoing, localized experiences for their audience, ensuring that users feel valued and understood.

Building a multilingual website with BCMS

Understanding the importance of multilingual websites is one thing, building and managing one is another challenge entirely. Many businesses recognize the need to reach a global audience, but when faced with the technical complexities of handling translations, managing multiple versions of content, and maintaining consistency across languages, the process can quickly become overwhelming.

This is where BCMS makes a real difference.

BCMS is a headless CMS built to simplify how developers and content teams work together. Instead of juggling separate websites or struggling with outdated translation practices, BCMS provides a centralized, structured way to manage multilingual content. It allows you to create content once and serve it dynamically in multiple languages, ensuring that your users always get the right version of your site, no matter where they are.

With BCMS, you don’t need multilingual plugins or to worry about manually updating translations in different places or accidentally publishing inconsistent information. Everything is streamlined: from setting up language variations to integrating translation workflows and even handling region-specific content.

Whether you're managing an e-commerce store that needs product descriptions in five languages or a global SaaS platform with a diverse user base, BCMS provides the tools to scale effortlessly.

In the following sections, I’ll walk through how to set up and manage a multilingual site with BCMS.

Prerequisites

Before getting started, ensure you have the following:

A BCMS account: If you haven’t signed up, you can do so at BCMS.
Basic knowledge of BCMS concepts: Understanding how templates, entries, and APIs work will help you follow along.
Understand how BCMS is integrated with Nuxt.

Setting up localization in BCMS

To begin, you would need a project to work with. The BCMS team has done a fantastic job of putting together a handful of projects to demonstrate its capabilities in various spaces and frameworks.

For this, you would be using the simple blog starter in the Nuxt framework. However, you are not bound by the framework and may choose to use your favorite one. To pull this project, do the following command:

npx @thebcms/cli create nuxt starter simple-blog

Follow the prompts as they appear. Once completed, you should have a project in your working directory. You will also be prompted to run some commands to finalize the setup; do so.

While the prompt ran in the CLI, the BCMS tool did a few things in the background. It created a new project for you, a template in the project, and entries in the template. To see this, visit your dashboard.

Navigate to the settings page from the sidebar. The upper right corner of the general settings tab contains a section for languages. English is the default language however, you can add more languages. A free plan allows you to add just one language; to add additional languages, subscribe to the pro plan.

Select a second language. For this tutorial, the language will be French.

Once your localization settings are in place, managing translations is simple. On the sidebar, you would see an entry dropdown, click on it and select "Blog". This will take you to a page containing all entries for the project.

Once the localization settings are in place, managing translations is effortless. On the sidebar, you will notice an entry dropdown; click on it and pick "Blog". This would send you to a page that contains all of the blog's entries.

Click on the first entry on the page.

You should see a page like this. On this page, you can change the content of the blog entry. Change the language to French on the right to input the translated entry.

You can use translation tools or AI-powered translation services to translate the entry into French, change the status to publish, and click the update button.

With this, the translation is complete. You should do this with the other entries in the blog template. These translations are sent out every time you make an API request to get an entry.

Implementing language switching

Now that the contents have their translations, you need to allow the users to switch between languages and save their preferred language across the application. To do that, in the composables/ folder, create a useLang.ts file and add the code snippets:

import { useCookie } from '#app';

export const useLang = () => {
    const locale = useCookie('locale', { default: () => 'en' });

    const switchLanguage = async (newLocale: string) => {
        locale.value = newLocale;
        location.reload()
    };

    return { locale, switchLanguage };
};

The implementation is straightforward. It simply writes the new language to cookie storage and reloads the page, allowing the server to get the content in the chosen language.

Next, create a LanguageSwitcher.vue file in the components folder and paste the following:

<template>
  <select v-model="selectedLanguage" @change="changeLanguage">
    <option v-for="lang in languages" :key="lang.code" :value="lang.code">
      {{ lang.name }}
    </option>
  </select>
</template>

<script setup>
  import { useLang } from "@/composables/useLang";
  import { ref } from "vue";

  const { locale, switchLanguage } = useLang();
  const selectedLanguage = ref(locale.value);

  const languages = [
    { code: "en", name: "English" },
    { code: "fr", name: "Français" },
  ];

  const changeLanguage = () => {
    switchLanguage(selectedLanguage.value);
  };
</script>

Then, in the pages\blog\[slug].vue file, edit the code to match below:

<div class="flex justify-between items-center">
   <NuxtLink
      to="/"
      class="border border-appGray-200 bg-appGray-100 flex w-fit leading-none px-3 py-2 text-xl font-medium rounded-lg transition-colors duration-300 hover:bg-appGray-200 focus-visible:bg-appGray-200 mb-14 md:mb-20 md:px-5 md:py-4 md:text-2xl">
      Back to home
   </NuxtLink>
   <div>
      <BlogLanguageswitcher :slug="route.params.slug" />
   </div>
</div>

Finally, replace the code in the server\api\blog\[slug].ts file with this:

import { bcms } from '~/bcms-client';
import type { BlogEntry, BlogEntryMetaItem } from '~/bcms/types/ts';
import { EntryContentParsedItem } from '@thebcms/types';
import { ClientConfig } from '@thebcms/client';

export type BlogResponse = {
    item: {
        meta: BlogEntryMetaItem;
        content: EntryContentParsedItem[];
    };
    otherBlogs: BlogEntry[];
    bcms: ClientConfig;
    slugs: Record<string, string>; // All language slugs
};

export default defineEventHandler(async (event) => {
    const blogs = (await bcms.entry.getAll('blog')) as BlogEntry[];
    const slug = getRouterParam(event, 'slug');
    // Find the blog post regardless of language
    const blog = blogs.find((entry) =>
        Object.values(entry.meta).some((meta) => meta?.slug === slug)
    );
    if (!blog) {
        throw createError({ statusCode: 404, message: `Blog "${slug}" not found` });
    }
    // Collect all slugs for this post in different languages
    const slugs: Record<string, string> = {};
    Object.entries(blog.meta).forEach(([lang, meta]) => {
        if (meta?.slug) {
            slugs[lang] = meta.slug;
        }
    });
    // Default language (fallback)
    const defaultLang = 'en';
    const lang = getCookie(event, 'locale') || defaultLang;
    return {
        item: {
            meta: blog.meta[lang] as BlogEntryMetaItem,
            content: blog.content[lang] as EntryContentParsedItem[],
        },
        otherBlogs: blogs.filter((e) => e.meta[lang]?.slug !== slug),
        bcms: bcms.getConfig(),
        slugs, // Include all language slugs
    };
});

The code is comparable to the one that was there previously. Just a few tweaks to allow the translation to be retrieved. After that, visit any of the blog posts for which you input a translation for and interact with the language switch to see your content change.

And with that, you have a multilingual site! You can find the code for the project here.

Conclusion: Try easy content management for your global website with BCMS

There are numerous reasons why your app should be multilingual, yet providing multilingual apps presents unique problems. With BCMS's comprehensive multilingual features, growing your project to accommodate various languages is simple, ensuring that your content reaches a larger audience while being consistent.

Using these procedures, you may easily localize your website or application, increasing its reach and user engagement.