CODEWITHSUNDEEP
vue.jsinternationalizationnuxt.js
Martin Conde
Martin Conde

Reputation: 475

Nuxt JS i18n / multilingual with headless CMS

Just started playing around with Nuxt (and Vue in general) so please forgive me if I am overlooking something obvious here.

I am trying to set up a multilingual site using DatoCMS as my content source.

I have set up the nuxt-i18n plugin, translated routes and all is working fine. Now in a page, I need to switch the content depending on the current locale and I have only found examples with the content being stored locally in json files etc.

I found a workaround which can't be the way it is supposed to be:

<template>
  <div>
    <div v-if="this.$metaInfo.htmlAttrs.lang === 'de-DE'">{{homepage.germanTitle}}</div>
    <div v-else>{{homepage.englishTitle}}</div>
  </div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    homepage: gql`
      {
        homepage {
          id
          title
          englishTitle: title(locale: en)
          germanTitle: title(locale: de)
        }
      }
    `
  }
}
</script>

Any pointers would be much appreciated! :)

Upvotes: 4

Views: 2082

Answers (2)

mat_jack1
mat_jack1

Reputation: 1692

I think that you should fetch the data differently from GraphQL.

I would do something like:

query {
  homepage(locale: $locale) {
    id
    title
  }
}

From DatoCMS docs: https://www.datocms.com/docs/content-delivery-api/localization

But then you need to decide how to pass the $locale variable. That depends on how you prefer. I would check here: https://vue-apollo.netlify.com/guide/apollo/queries.html#simple-query the alternative options that you have.

Upvotes: 0

DreaMinder
DreaMinder

Reputation: 653

I'd say that this is the right way to do it:

<div>
<template v-if="$i18n.locale === 'en">{{homepage.englishTitle}}</tempate>
<template v-else>{{homepage.germanTitle}}</tempate>
</div>

You shouldn't use this inside of template, check i18n API to see where you can get data for your condition (in this case I use $i18n.locale), use template instead of div (or ternary operator, in order to avoid markup issues in some cases).

BUT, if its possible with graphql, I'd better do the following:

homepage {
     id
     title: {
       en: title(locale: en)
       de: title(locale: de)
     }
}

template:

<div>{{ homepage.title[$i18n.locale] }}</div>

Upvotes: 1

Related Questions