Multi-Language Blog with Nuxt content module.

Last week I managed to refactor my personal portfolio done using Nuxt alvarosaburido.com with 3 major features that the awesome team from Nuxt.js released recently:

Nuxt Full Static v2.13
@nuxt/content module here
@nxut/components module Github repo

The most game-changing is the Content Module that allows you to fetch your markdown files through a MongoDB like API, acting as a Git-based Headless CMS.

Today in this tutorial I gonna help you create your own multi-language blog using @nuxt/content.

Setup

Let's create our new project using the official scaffolding tool create-nuxt-app.

With yarn:



yarn create nuxt-app nuxt-i18n-blog

It will ask you some config questions, when you prompt with Nuxt.js modules option, you can select the content module directly:

Note: I will be using TailwindCSS to prototype faster the components used in this tutorial, if you need more info about it here are two nice articles about it: Building my site with Tailwind CSS & How to use Tailwind CSS with Nuxt.js

After all the installation:



cd nuxt-i18n-blog

npm run dev

Nuxt-i18n

To do a multi-language blog the first thing you need is to add i18n (Internationalization) module to your app. Of course. Nuxt already has an excellent module Nuxt-i18n which handles all the heavy lifting such as automatically generate routes prefixed with locale code and SEO support.



yarn add nuxt-i18n

Then add the module to nuxt.config.js:



{
  modules: [
    [
      'nuxt-i18n',
       { /* module options */ }
    ]
  ],

  // Or with global options
  i18n: {}
}

Now let's add the languages we want to support in the config, for this exercise we will create content in English (default), Spanish & French.



{
  modules: [
    [
      'nuxt-i18n',
       {
         locales: [
           {
              code: 'es',
              iso: 'en-ES',
              name: 'Español',
            },
            {
              code: 'en',
              iso: 'en-US',
              name: 'English',
            },
            {
              code: 'fr',
              iso: 'fr-fr',
              name: 'Français',
            },
         ],
         defaultLocale: 'en',
         noPrefixDefaultLocale: true,
       }
    ]
  ],
}

The noPrefixDefaultLocale means that the module won't generate local prefixed routes, example defaultLocale: 'en' yourblog.com/en/articles would be yourblog.com/articles instead.

Next thing is to add the json files for the locale messages, under locales folder and we add them to the nuxt-config.js like this:



'nuxt-i18n',
  {
    //  locales: [..].
    //
        vueI18n: {
      fallbackLocale: 'en',
      messages: {
        en: require('../locales/en-us.json'),
        es: require('../locales/es-es.json'),
        fr: require('../locales/fr-fr.json'),
      },
    },
  },

Content

Before digging in the directory structure for a multi-language blog that I used for my portfolio, I must say there is no standard way to do it, my recommendations are based on previous experience working with CMS technologies for the past 6 years and how they organize the content for several languages.

For the sake of this tutorial I recommend you follow the same structure so, it makes sense and is easy to follow, but for your own blog find the best way that adapts to your preferences and use cases.

The core idea is to have routes following:



<domain>/<local>/<parent-route>/<child-route>

Like for example nuxt-i18n-blog/es/blog/code-article . It mimics the structure in the content directory so everything comes together smoothly when we proceed to fetch the data.



nuxt-i18n-blog
└── 📁 content
    ├── 📁 en
    │   └── 📁 blog
    │       └── 📄 my-first-article.md
            └── 📄 my-second-article.md
    ├── 📁 es
    │   └── 📁 blog
    │       └── 📄 mi-primer-articulo.md
    ├── 📁 fr
    │   └── 📁 blog
    │       └── 📄 mon-premier-article.md
    └── 📁 ca
        └── 📁 blog
            └── 📄 meu-primer-article.md

The cool thing is that @nuxt/content supports FrontMatter by default, meaning you can add metadata to your article like this:



---
title: "My first article"
category: web
description: "Step by step tutorial on how to stop being sad and being awesome instead."
media: https://images.unsplash.com/photo-1592500103620-1ab8f2c666a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3000&q=80
---

Your content

For the article's media images, I found a really cool account inside unsplash.com called @morningbrew with awesome quality images that will look nice as placeholders for your tests.

The Blog

So now that we have configured the locales and the content structure, we can start creating our pages. The idea will be to have:

/blog view containing our blog feed.
A header with language switching links
/blog/_slug with the article itself.

Let's dig in.

Feed

For the blog page, under /pages create a blog/index.vue (In Nuxt, instead of creating Blog.vue we create a index.vue inside of a directory called blog, as it's explained here)



//  blog/index.vue

<script>
export default {
  name: 'Blog',
  async asyncData(context) {
    const { $content, app } = context;
    const posts = await $content(`${app.i18n.locale}/blog'`).fetch();

    return {
      posts,
    }
  },
}
</script>

The asyncData is called every time before loading the page component, it receives the context. It's pretty handy when it comes to fetch some data before the lifecycle hooks.

Inside the context, you will notice there is a $content instance, (Same as this.$content if you decide to use it outside of asyncData).



const posts = await $content(`${app.i18n.locale}/blog'`).fetch();

Since is an async function, you need to add await, it accept a path which is essentially the same path structure we used for the route.

You might think, why not use the route inside the context instead of computing the route using the current locale?. You can totally use await $content(context.route.path).fetch() but you will need to deactivate the noPrefixDefaultLocale in the nuxt.config.js because you will not have the locale prefix in the route for the default locale. Or, remove the currentLocale directory inside of /content directory, but is not really scalable in case you want to change you default locale later.

There are a lot of cool options like filtering and sorting methods to use along fetch() so make sure you check them out here 😜.

As a result we will have an array with all the articles fetched, the cool thing is that you will have all the metadata from your .md as properties in each post instance.

Now let's add a template to show some cards with the articles we just fetch



<template>
  <div class="blog container mx-auto">
    <section class="grid grid-cols-3 gap-4 pt-12">
      <article
        class="post max-w-sm rounded overflow-hidden shadow-lg flex flex-col"
        v-for="(post, $index) in posts"
        :key="`post-${$index}`"
      >
        <img class="w-full" :src="post.media" :alt="post.title" />
        <div class="px-6 py-4 flex-2">
          <h3>{{ post.title }}</h3>
          <p class="text-gray-700 text-base">
            {{ post.description }}
          </p>
        </div>
        <footer class="p-4">
          <nuxt-link :to="post.path" class="font-bold text-xl mb-2">
            <button :to="post.path" class="btn btn-teal">
              {{ $t('read-more') }}
            </button>
          </nuxt-link>
        </footer>
      </article>
    </section>
  </div>
</template>

PD: For the sake of this tutorial, I added a second article in the default locale to actually see more posts on the Blog page so it looks better.

Language Switching

Under the /components directory, create a Header.vue:



<template>
  <header class="topnav h-54px p-2 border-b-2 border-gray-200">
    <div class="container mx-auto flex justify-between items-center">
      <div class="right flex justify-start items-center">
        <Logo class="w-8 h-8 mr-3" />
        <h1 class="text-lg font-bold text-gray-700">{{ title }}</h1>
      </div>
      <div class="left self-end">
        <ul class="flex lang-switch justify-around">
          <!-- ...Here goes the language-switch -->
        </ul>
      </div>
    </div>
  </header>
</template>

What is pretty important is what it's inside of the language-switch using switchLocalePath('en') in the :to prop for <nuxt-link>



<ul class="flex lang-switch justify-around">
  <li v-if="$i18n.locale !== 'en'">
    <nuxt-link class="text-md ...":to="switchLocalePath('en')">EN</nuxt-link>
  </li>
  <li v-if="$i18n.locale !== 'es'">
    <nuxt-link class="text-md ..." :to="switchLocalePath('es')">ES</nuxt-link>
  </li>
  <li v-if="$i18n.locale !== 'fr'">
    <nuxt-link class="text-md ..." :to="switchLocalePath('fr')">FR</nuxt-link>
  </li>
</ul>

Then this component is ready to be added globally in layouts/default.vue just above the <Nuxt />. This way you will have it available in all your routes that use this layout.



<template>
  <div>
    <Header />
    <Nuxt />
  </div>
</template>

<script>
export default {
  name:'default'
}
</script>

Try clicking each link to see how your route changes to the selected locale. You should see how the page shows the correct posts for each language like this:

If we click any of the posts Read more buttons we will be routed to a child page that we are going to build in the next section. But before continuing there is a catch.

When we define the button:



<nuxt-link :to="post.path" class="font-bold text-xl mb-2">
  <button :to="post.path" class="btn btn-teal">
    {{ $t('read-more') }}
  </button>
</nuxt-link>

We are passing the Post's path directly, if you are using noPrefixDefaultLocale, @nuxt/content will still give you the path with the corresponding locale prefix (this is because we build our content directory this way) so it will try to access a route it doesn't exist whenever you are in the default locale, leading to a page like this:

Don't worry, it's pretty easy to solve. Go back to the Blog component and map the posts returning from the $content fetch like this:



const defaultLocale = app.i18n.locale;
const posts = await $content(`${defaultLocale}/blog`).fetch();

return {
  posts: posts.map(post => ({
    ...post,
    path: post.path.replace(`/${defaultLocale}`, ''),
  })),
};

This should be enough to replace all the post paths containing the default locale.

Content Page

Now comes the fun part 😜. Until now we have created the basic structure and config + our Blog page and a nice language switcher, it's time to create the actual content page for our article.

Inside of pages/blog/ create a folder _slug with an index.vue inside:



<script>
export default {
  name: 'Post',
  async asyncData(context) {
    const { $content, params, app, route, redirect } = context;
    const slug = params.slug;
    const post = await $content(`${app.i18n.locale}/blog`, slug).fetch();

    return {
      post,
    }
  },
}
</script>

Similar to what we did on the Blog component, we fetch the post trough a $content instance, but this time passing the slug (es/blog/<slug>) obtained from the route parameters.

For the template, we have an special component called <nuxt-content /> that requires the post to pass using the prop :document like this:



<template>
  <div class="container mx-auto pt-6">
    <article v-if="post">
      <nuxt-content class="text-gray-800" :document="post" />
    </article>
  </div>
</template>

<nuxt-content> component will automatically add a .nuxt-content class, you can use it to customize your styles:



.nuxt-content h1 {
  /* my custom h1 style */
}

To add more juice to the content page let's take advantage of the props available using Frontmatter.



<template>
  <div class="container mx-auto pt-6">
    <article v-if="post">
      <header class="grid grid-cols-2 gap-4 mb-12 rounded shadow-lg p-4">
        <img :src="post.media" alt="post.title" />
        <div class="">
          <h2 class="text-lg font-bold text-gray-800 mb-2">{{ post.title }}</h2>
          <p class="text-sm text-gray-700">
            {{ $t('published-at') }} {{ getDate }}
          </p>
        </div>
      </header>
      <nuxt-content class="text-gray-800" :document="post" />
    </article>
  </div>
</template>

This will give us a nice header with the image, the title, and the createdAt we get from a computed property called getDate, for this, date-fns will be our best friend-



import { format } from 'date-fns';

const computed = {
  getDate() {
    return format(new Date(this.post.createdAt), 'dd/MM');
  },
};

But how about metadata? Nuxt.js uses vue-meta under the hood to update headers and html attributes in each page.

To do this in the Content Page add the head method to your component, take notice of the htmlAttrs lang where we set the current locale. The rest is just Open Graph meta.



export default {
  name: 'post',
  head() {
    return {
      title: this.post.title,
      htmlAttrs: {
        lang: this.$i18n.locale,
      },
      meta: [
        {
          hid: 'og:description',
          property: 'og:description',
          content: this.post.description,
        },
        {
          property: 'og:title',
          hid: 'og:title',
          content: this.post.title,
        },
        {
          hid: 'og:image',
          property: 'og:image',
          content: this.post.media,
        },
      ],
    };
  },
};

Inspecting the social preview of your page (I use a chrome extension called Social Share Preview) we can see the metadata is correctly working with the post information.

Language switching inside post

But wait? What happens if I try to change the language when I'm inside of the Content Page? Yep, you guessed right, I will not work, and here is why.

If you remember well, we use <nuxt-link class="text-md ..." :to="switchLocalePath('es')">ES</nuxt-link> for the language-switcher which will take the current path and change the prefix of the route. The problem is that if you change blog/my-first-article to, let's say, Spanish, the route would be /es/blog/my-first-article, this route doesn't exist in our content structure because we the slug corresponds to the file name, so for Spanish version should be /es/blog/mi-primer-articulo.

There are many strategies to solve this:

Adding the other languages routes in the Frontmatter of each article and use a .catch() when fetching data to redirect to current locale version.
Adding a uid in the Frontmatter unique for all the locales version of the article, and then use this to fetch the correct article
Same as the first one but instead of using catch, just hide the language switcher on Content Pages and add the links manually on the post.

For my blog I opted for the second solution which I think is cleaner, step 1 you just need to add in your Header component a condition to hide at content pages (you can detect it by checking if the route has a slug param).



// in the template
<template>
  <ul class="flex lang-switch justify-around" v-if="!isContentPage">
    <!-- ...-->
  </ul>
</template>;

// in the component script
export default {
  name: 'Header',
  data,
  computed: {
    isContentPage() {
      return this.$route.name.includes('slug');
    },
  },
};

In your articles Frontmatter section, add an array of objects containing the paths of the other locales versions of the article



//content/en/blog/my-first-article.md

title: My first article
category: web
description: Step by step tutorial on how to stop being sad and being awesome instead.
media: https://images.unsplash.com/photo-1592500103620-1ab8f2c666a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3000&q=80
otherLanguages:

- locale: es
  path: /es/mi-primer-articulo
- locale: fr
  path: /fr/mon-premier-article

---

Next let's add the logic to pages/_slug/index



// in the template
<template>
<!-- ... -->
  <p class="text-sm text-gray-700">
    {{ $t('also-available-in') }}
    <nuxt-link
      class="uppercase text-teal-600 hover:text-teal-800"
      v-for="lang in otherLanguages"
      :key="lang.locale"
      :to="lang.path"
    >
      {{ lang.locale }}
    </nuxt-link>
  </p>
<!-- ... -->
</template>

// in the component script
export default {
  name: 'Header',
  data,
  computed: {
    // ...
    otherLanguages() {
      return this.post.otherLanguages || []
    },
  }
}

And voilá. Now you have a nice multi-language blog.

If you enjoy the article, you have questions or any feedback let's talk in the comments 💬.

Happy coding!.

Blog