Provide/Inject example

[ralphchristianeclipse]

is this the right way to inject the env vars or is it automatically injected?

export default ({ app }) => {
  app.provide = () => ({
    MEDIA_SERVER: process.env.MEDIA_SERVER
  });
};

_{This question is available on Nuxt.js community (#c2440)}

[microcipcip]

From the docs it seems that process.env it is not automatically injected. The way I've fixed this is by setting up a conf variable in nuxt.config.js:

{
  env: {
    conf: process.env
  },
}

However it seems that then all the data of process.ENV is saved and available to the client on .nuxt/utils.js which could be a very very serious security issue.

Maybe is better to filter process.env and only allow safe variables coz I currently have DB connections info there. So maybe it would be better something like this:

const config = {}
const configAllowed = [
  'HOST',
  'PORT',
  'API',
  'SITE_TITLE',
  'SITE_META_DESCRIPTION',
  'SITE_DOMAIN_FULL_NAME',
  'MEDIA_SERVER'
].forEach((confAllowed) => {
  config[confAllowed] = process.env[confAllowed]
})

{
  env: {
    conf: config
  },
}

Now you can access all your config with process.env.conf.PORT etc etc...

[ralphchristianeclipse]

@microcipcip I mean if i can just easily inject in any component like this

InjectComponent.vue

export default {
   inject: ["MEDIA_SERVER"],
   mounted() {
     console.log(this.MEDIA_SERVER)
   }
}

hmmm probably the best way if we can have an provide option in nuxt config like this

provide: {
MEDIA_SERVER: "ASFSAF"
}

then can be injected by any component

which is helpful for the purpose of provide/inject api

Provide/Inject(https://vuejs.org/v2/api/#provide-inject)

[microcipcip]

@ralphchristianeclipse ooops sorry I didn't know about provide-inject property of Vue.

[ralphchristianeclipse]

@microcipcip its okay :)

[TheAlexLichter]

A decent inject documentation will be released soon (see nuxt/docs#694)

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.