Create more than one WPAPI instance (with different endpoints)

[lagset]

Hey there,

I am using wp-nuxt to integrate a wordpress multisite-network (mutliple languages). So far it works great, however I am having a hard time figuring out whether or not it is possible to define multiple endpoints in the nuxt.config.js, like in the following example.

This is the standard way defining one WPAPI instance which can be referenced using this.$wp in vuex:
nuxt.config.js

...
  modules: [
    "wp-nuxt",
  ],
wp: {
    endpoint: "http://cmshost/wp-json/",
}
...

Now, I want to have a second (or more) WPAPI instance(s) providing a different endpoint. In my case the endpoint would vary by locale:

nuxt.config.js

...
  modules: [
    "wp-nuxt",
  ],
wp: {
    endpoint: ["http://cmshost/wp-json/", "http://cmshost/wp-json/de"],
}
...

Is this possible using wp-nuxt or do I need to change using node-wpapi directly and do the nuxt integration myself?

Thanks in advance,
Valentin

[yashha]

Would be this solution enough? #54
I don't know how you would access the alternative entpoints using $wp.
Should this maybe be a integration with nuxt-i18n? Or how do you know which endpoint should be used?

[lagset]

Thanks for the quick response.
Yeah this solution would work and suffice for my use case, I guess, thanks for pointing me to it.

Currently I am using nuxt-i18n, yes. My plan is to change the endpoint based on this.$i18n.locale injected by nuxt-i18n in the vuex store.

I basically imagined a simple approach providing multiple injected variables for each endpoint defined in the array (in my second example in original post), like: $wp1 and $wp2. Or even a feature where one would define the name of the endpoints in the config, e.g.:

nuxt.config.js

wp: {
    endpoints: [
        {
            name: "en",
            url: "http://cmshost/wp-json/",
        },
        {
            name: "de",
            url: "http://cmshost/de/wp-json/",
        },
    ],  
}

...and access them via a central object using bracket notation, like:

store/index.js

...
export const actions = {
    fetchPages() {
      let data = await this.$wp[this.i18n.locale].pages()
     commit("someMutation", data)
    },
}

In the end, I don't know if this would work as I think it would (have not thought it through) and the approach you linked above is also good for me. Thanks again :)