Search code examples
nuxt.jsvuexnuxt-i18n

Nuxt generate with vuex and multi-language site

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

Solution

  • Cause of the problem

    I finally got to the source of the issue. I will share my misconceptions with you so it might help someone with similar setup.

    So first of all, on generate saves the results of the nuxtServerInit() of the store and the asyncData() and fetch() of the layout and page components for each route in a payload.js file to simulate the API calls on the generated static site (https://nuxtjs.org/blog/going-full-static/#crazy-fast-static-applications).

    When writing the original post, I did two things, which made nuxt not store the whole payload of the fetch() method of each page component when switching language manually:

    1. On nuxtServerInit() I fetched some API data for all routes (e.g. site title, list of main pages for the navbar, etc.)

    2. On fetch() in the page components I fetched needed resources only if these were not already in the nuxt store. This would make sense imho in a SSR/SPA site, because you don't need to fetch (and wait), if you already have the data.

    Consequently, this means nuxt generate fetches this data for each page with nuxtServerInit() saving the payload associated with nuxtServerInit. However, it does not save the payload on fetch() because the if condition in the page component's fetch() method at the time of generation returns false - because the data was fetched already with nuxtServerinit().

    As a result, switching the locale on the generated static site triggered the simulated fetch() for the routes page component, but the payload for this method didn't contain the data.

    Solution

    The simplest solution is to not fetch any or at least any locale-specific data on nuxtServerInit() if isStatic is true and do the fetching in page or layout components.