nuxtjs/router use runtime config client side

Question

we are using nuxt 2.14.12 and @nuxtjs/router 1.5.0
we are trying to use runtime config to make some HTTP request client side.

here is our router.js

export async function createRouter(ssrContext, createDefaultRouter) {

[...]

  try {
    const res = await axios.get(`${config.public.apiBaseUrl}/myslug`)
  } catch (e) { }

[...]

}

here is the config file

[...]

  const apiBaseUrl = `${process.env.NUXT_ENV_MY_API_URL || 'http://my-dev-domain.com'}`

[...]

export default {
    apiBaseUrl,
  },
  private: {
    apiBaseUrl,
  },

[...]

here is our nuxt.config.js

export default {

[...]

  publicRuntimeConfig: config.public,
  privateRuntimeConfig: config.private,

[...]

  buildModules: [
    ['@nuxtjs/router', { keepDefaultRouter: true }],
  ],

[...]

  router: {
    linkActiveClass: 'current-menu-item'
  },
[...]
}

we use nuxt build in our CI and later at runtime we use nuxt start

at runtime, despite on server side the env variable NUXT_ENV_MY_API_URL is correctly set, on the client site the variable looks hardcoded (I think webpack replace it) and we get the value present on build time (http://my-dev-domain.com)

is there a way to use the runtime config on the client side?

thank you

nuxtjs/router use runtime config client side

0 Answers