如何在 nuxt.config.js 文件中使用插件的数据？

Question

My plugin, env.js:

export default async (_ctx, inject) => {
  const resp = await fetch('/config.json')
  const result = await resp.json()
  inject('env', result)

  // eslint-disable-next-line no-console
  console.log('env injected', result)

  return result
}

Then an idea was to use it's data inside nuxt.config.js to inject into publicRuntimeConfig:

import env from './plugins/env.js'

publicRuntimeConfig: {
  test: env,
},

Then in a browser console i'm checking it:

this.$nuxt.$config

It shows me:

instead of a value, though this.$nuxt.$env shows the correct values:

What's wrong?

Answer 1

In nuxt.config.js , your env variable is a JavaScript module , where the default export is the function intended to be automatically run by Nuxt in a plugin's context. Importing the plugin script does not automatically execute that function. Even if you manually ran that function, it wouldn't make sense to use an injected prop as a runtime config because the data is already available as an injected prop.

If you just want to expose config.json as a runtime config instead of an injected prop, move the code from the plugin into an async configuration :

// nuxt.config.js
export default async () => {
  const resp = await fetch('/config.json')
  const config = await resp.json()

  return {
    publicRuntimeConfig: {
      keycloak: config
    }
  }
}