wp-nuxt | The module adds WP-API to your nuxt application | Content Management System library

I am currently building my first (statically generated) website with nuxt and a headless Wordpress as CMS. I am also using the module nuxt-i18n for multi-language support: German (default) and English.

The setup

To fetch data from the multi-language Wordpress I use the module wp-nuxt and then store the data from the CMS in thes vuex store. Dependent on the client browser language or when the language is changed by the user manually, the endpoint of $wp (wp-nuxt) is changed, so the appropiate content will be fetched and stored in the store.

Now, on NuxtServerInit() some basic data is fetched from the CMS for the locale defined by the route (e.g. http://myserver/en/news will fetch basic data from the english CMS endpoint http://wphost/mycms/en/wp-json/wp/v2/..., see /en/ in endpoint). For each layout/page further content is fetched via asyncData() and fetch(), also, of course, for the current locale.

The problem

This works fine, as long nuxt is ran via nuxt dev. If the locale is switched by the user, the fetches for the other locale will be handled by asyncData() and fetch() on the client.

nuxt generate works also for the locale the site was first loaded with, however has troubles when switching locales: The data is not found in the store.

My guess is: On generate nuxt is calling nuxtServerInit(), asyncData() and fetch() for each route. This will fill the store of each route with the routes locale data. For DE-Routes (e.g. myserver/impressum) german content, for EN-routes (e.g. myserver/en/site-notice) english content. But if the locale is changed by the user, the stores of these routes only contain content for the current locale and asyncData() and fetch() won't be called to fill the store (of course, this is by design of generate).

Consequently, it seems to me that nuxt is storing different "vuex store instances" for the different routes and cannot switch to the store on user initiated locale switch.

Possible workarounds

There are a few simple workarounds I already tried and seem to solve the issue but are far from perfect:

1. Trigger a reload on language switch, so the site is realoaded and nuxt is loading the store for the route with the correct locale. - I don't like it, it feels hacky.

2. Fill the store via nuxtServerInit() with data of both languages, by fetching against both CMS endpoints. - I don't like it either, it feels hacky and although it may work for two languages this has huge overhead, the more content the CMS has.

I hope I was able to describe the problem appropriately. Is there something I am missing? I haven't found anything on this, so far. I would appreciate if you have any thoughts on that.

Thanks, Valentin