How to add content to Nuxt i18n in page (wordpress headless cms)

I’m trying to use Wordpress as a headless CMS and pull the content in using Nuxt, which I’m using as a SSG. I have a few languages that I need to translate it to but can’t quite work out how to make this work.

I would like to do something like this, but it doesn’t work as the blocks only seem to take strings:

<i18n>
{
  "en": en,
  "nb": nb
}
</i18n>

<template>
  <div class="container">
    {{ $t('frontpage_top_section.frontpage_heading') }}
  </div>
</template>

<script>
export default {
  async asyncData() {
      const en = await fetch('https://wordpressurl.net/wp-json/wp/v2/pages/4685').then(res => res.json());
      const nb = await fetch('https://wordpressurl.net/wp-json/wp/v2/pages/4235').then(res => res.json());
      return {
        en, nb
      }
  },
}
</script>

What is the right approach here? How can I pull the content from Wordpress API on a per page/component basis and use it within the template? I’m not sure if i’m going completely down the wrong path here but any help would be appreciated.

Let me know if I’ve missed anything out and thanks :slight_smile:

So i’ve worked this out and I thought I would share here incase anyone else is confused. If anyone wants to elaborate on this feel free.

So what I did is not to try and include this in the page/component itself but to use separate files to call the data, as can be seen here: https://i18n.nuxtjs.org/lazy-load-translations

So in nuxt.config.js I have:

  modules: [
[
  'nuxt-i18n',
  {
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        file: 'en-US.js'
      },
      {
        code: 'nb',
        iso: 'nb_NO',
        name: 'Norwegian',
        file: 'nb.js'
      },
    ],
    lazy: true,
    langDir: 'lang/',
    defaultLocale: 'en',
    fallbackLocale: 'en',
    seo: true
  },
]
]

And then for example, in /lang/en-US.js I call the specific pages for that language (and do the same for the other languages):

export default async (context, locale) => {
let homepage = await fetch('https://wordpressurl.net/wp-json/wp/v2/pages/4685').then(res => res.json());
let about = await fetch('https://wordpressurl.net/wp-json/wp/v2/pages/9519').then(res => res.json());
return {
    homepage, about
}
}

And then in my templates I can call:

<template>
  <div class="container">
{{ $t('homepage.acf.frontpage_top_section.frontpage_heading') }}
  </div>
</template>

Now when i load the page, the correct content is shown and if I go to, for example: /nb the Norwegian content is shown.

I have a question. in file /lang/en-US.js , all of fetch was call when change language or just call for each page