CODEWITHSUNDEEP
vue.jsquasar-frameworkquasar
Alex T
Alex T

Reputation: 3754

Accessing environment vairables in quasar app

I'm trying to access env variable but there is no way I can make it work: I tried creating .env file and setting the variable

VUE_APP_TOKEN: 11token22

there but when I console.log it Im getting undefined.

Next thing I tried was setting the env variable in quasar.conf.js:

build: {
  vueRouterMode: 'hash', // available values: 'hash', 'history'
  env: {
    VUE_APP_TOKEN:'11token22' 
  },

  extendWebpack (cfg) {
    cfg.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /node_modules/,
      options: {
        formatter: require('eslint').CLIEngine.getFormatter('stylish')
      }
    })
  }
},

And Im getting this error:

vue.runtime.esm.js?5593:619 [Vue warn]: Error in mounted hook: "ReferenceError: 11token22 is not defined"

In my component I just try to log process.env:

  mounted () {
      console.log(process.env);
  },

Any idea how can I access environment variable in quasar app? Im running out of ideas and in documentation I cant see anything that would help clarify this.

Im using quasar/cli 1.2 and quasar/app 1.0

Upvotes: 3

Views: 2459

Answers (1)

aleng
aleng

Reputation: 428

Maybe you've figured it out by now, but based on quasar doc, if you are using .env file, you can install the package first;

yarn add --dev dotenv

or

npm install dotenv --save

then, in /quasar.config.js;

build: {
  env: require('dotenv').config().parsed
}

then you can access with process.env.<YOUR_ENV_VARIABLE>, and according to the docs, console.log(process.env) will error, while process.env.<YOUR_ENV_VARIABLE> will resolve

Do not console.log(process) or console.log(process.env) as this will error out, for security reasons.

Upvotes: 2

Related Questions