@beets Okay, yeah. That works as expected, but I’m still not able to dynamically get my environment variables.

Even if I define like below inside quasar.conf.js if I console.log(process.env) somewhere else in the project it will still be an empty object.

build: {
  env: {
    foo: "bar"
  }
}

Edit: I put it all inside a child property. THat seems to solve it:

build: {
    vueRouterMode: 'history', // available values: 'hash', 'history',
    env: {
        props: Object.entries(process.env).reduce((acc, [key, val]) => {
            if (key.startsWith('VUE_APP')) {
                acc[key] = val;
            }
            return acc;
        }, {}),
    },
}

@beets

Shouldn’t the following: foo: "bar" under build in quasar.conf.js make me able to console.log(process.env.foo) in my quasar plugin and get “bar”?

It does just output undefined as well.

@beets Forget my last comment. I added the snippet to the wrong file.

When adding it to my quasar.conf.js it outputs this ENV VARS: { VUE_APP_BACKEND: 'localhost:3020' }, so that part seems to work.

Still, with the snippet from your first comment, I am not able to make it work.

@beets This is the output from the console.log

ENV VARS: 
{}
​
<prototype>: Object { … }
configuration.ts:11

So just an empty object

@beets Hmmm. Doesn’t seem like it made any difference unfortunately.

I have a plugin that I use to get environment variables with a prefix, that is easy for me to search and replace with a bash script in a prod docker container.

This does no longer work after quasar 2.0. See the problem in action below

console.log(process.env['VUE_APP_FOO']) // returns 'bar' from env
console.log(process.env.VUE_APP_FOO) // returns 'bar' from env

const something = 'VUE_APP_FOO'
console.log(process.env[something]) // This will return undefined. How can I fix this?

This is the script I’m using, but Configuration.value will always return undefined because of the issue above.

import Vue from 'vue';

type ConfigTypes = 'backendHost' | 'domain';
export default class Configuration {
	static get CONFIG() {
		return {
			backendHost: '$VUE_APP_BACKEND',
			domain: '$VUE_APP_DOMAIN',
		};
	}

	static value(name: ConfigTypes) {
		if (!(name in this.CONFIG)) {
			console.log(`Configuration: There is no key named "${name}"`);
			return;
		}

		const value: string = this.CONFIG[name];

		if (!value) {
			console.log(`Configuration: Value for "${name}" is not defined`);
			return;
		}

		if (value.startsWith('$VUE_APP_')) {
			// value was not replaced, it seems we are in development.
			// Remove $ and get current value from process.env
			const envName = value.substr(1);
			const envValue = process.env[envName];
			if (envValue) {
				return envValue;
			} else {
				console.log(`Configuration: Environment variable "${envName}" is not defined`);
			}
		} else {
			// value was already replaced, it seems we are in production.
			return value;
		}
	}
}

Vue.prototype.$conf = Configuration;

Hello! I have the same problem. Did you ever solve this @jjurado ?

okay. So “strict” was set to true in tsconfig. Disabled this and my headaches disappeared.

I am running Quasar 1.0.0 and I have installed Quasar-Typescript 1.0.0-alpha.14.

When trying to install an Apollo Client I am doing an export on the end of the file which is giving some type errors. Any Idea how I can solve this?

Binding element ‘app’ implicitly has an ‘any’ type.
Binding element ‘Vue’ implicitly has an ‘any’ type.

export default ({ app, Vue }) => {
	Vue.use(VueApollo);
	app.apolloProvider = apolloProvider;
};