Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide/Inject example #2812

Closed
ralphchristianeclipse opened this issue Feb 10, 2018 · 6 comments
Closed

Provide/Inject example #2812

ralphchristianeclipse opened this issue Feb 10, 2018 · 6 comments
Labels

Comments

@ralphchristianeclipse
Copy link

ralphchristianeclipse commented Feb 10, 2018

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
Copy link

microcipcip commented Feb 11, 2018

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
Copy link
Author

@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
Copy link

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

@ralphchristianeclipse
Copy link
Author

@microcipcip its okay :)

@manniL
Copy link
Member

manniL commented Aug 12, 2018

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

@manniL manniL closed this as completed Aug 12, 2018
@lock
Copy link

lock bot commented Nov 1, 2018

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.

@lock lock bot locked as resolved and limited conversation to collaborators Nov 1, 2018
@danielroe danielroe added the 2.x label Jan 18, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

4 participants