How to translate slugs with Nuxt.js and Storyblok

In this article I explain how to use a translated slug with nuxt. I also show you a really simple real life example with Storyblok.

Section titled Use cases Use cases

You can use Storyblok for basically everything! Use it for e-commerce, a personal website, blog, etc. As you may know, these days SEO is really important. Having a translated URL for your website will boost your SEO performance. Check out the google documentation, it encourages you to do that.

Section titled Let's create the project Let's create the project

If you already have a project with nuxt and nuxt-i18n skip to the next point. Or check out the code directly. (Live demo)

bash

        
      npx create-nuxt-app myproject
    

Make sure to select axios. From here you need to install nuxt-i18n.

bash

        
      npm install --save-dev nuxt-i18n
    

You need to create a file store/index.js to activate the store in your NuxtJS project and make Nuxt i18n work.

Section titled Static page with translated slugs Static page with translated slugs

For the static pages, you can check the docs. You can configure it in the module configuration inside your nuxt.config.js or directly in components. Here is an example of how to use it in a component:

pages/contact.vue

        
      <template>
  <div>Contact me</div>
</template>

<script>
export default {
  nuxtI18n: {
    paths: {
      en: '/contact-me',
      fr: '/me-contacter',
    }
  }
}
</script>
    

Important: If the filename is different from the default lang use this example to navigate to it.

        
      <nuxt-link :to="localePath({ name: 'contact' })">
    

Section titled Let's use dynamic URLs with Storyblok. Let's use dynamic URLs with Storyblok.

For dynamic URLs I could have used Nuxt content. But as I have worked on a lot of eCommerce websites, I prefer doing it with Storyblok.

First, let's see how to use dynamic routes parameters with nuxt-i18n. You will need to use 'i18n/setRouteParams' actions from your Vuex store. Your file will look like pages/_articleId.vue .

pages/_articleId.vue

        
      <template>
  <div>
    <h1>{{ content.seo.title }}</h1>
    <div>
      {{ content.seo.description }}
    </div>
  </div>
</template>

<script>
import { translatedSlugs } from '~/helpers/translated_slug'

export default {
  name: 'PageArticle',
  async asyncData(ctx) {
    const locale = ctx.app.i18n.locale === 'en' ? '' : 'fr'
    const param = ctx.params.articleId

    try {
      const article = await ctx.app.$storyapi.get(
        `cdn/stories/${locale}/articles/${param}`,
        {
          version: process.env.STORYBLOK_VERSION || 'draft',
        }
      )
      const story = article.data.story
      await ctx.store.dispatch('i18n/setRouteParams', translatedSlugs(story))

      return story
    } catch (e) {
	   // your error handler
    }
  },
  data: () => ({
    content: { seo: {} },
  }),
}
</script>
    

And that's it! Now your visitors can enjoy URLs in their native language.

Thanks for reading this article and if you want to support me you can buymeacoffee.

Thank's to Josh Deltener for reviewing the article.