How to pass ENV-variables into Quasar-Framework Application

Although QuasarFramework solves many problems around web development, I missed some things that I had all the time bevor.

One important thing are ENV-files to pass environment variables into your application depending on the final environment like “Development”, “Staging”, “Testing” or “Production”.

But nobody will told you about how to make it work with Quasar, even not the official documentation. It took me some more readings across GitHub, StackOverflow, several other Blogs and so on to collect all the required pieces that will necessary in order to make it finally work.

Long story short, this is how it goes with Quasar:

1. throw away your existing env-files
2. Install the qenv-extension:

quasar ext add @quasar/qenv

3. create a file called “.quasar.env.json” with variables like:

{
  "development": {
    "ENV_TYPE": "Running Development",
    "ENV_DEV": "Development",
    "API_HOST" : "api.xxxx.io",
    "APP_HOST" : "xxxx.io",
    "API_SCHEME" : "https"
  },

3. Rebuild everything (either “quasar dev” or “quasar build” depending on which environment you want to hook up here, but have a look at step 4:

4. In order to make ENV-variables *really* available in Quasar Framework, another important step is required: you have to pass a QENV-Variable on terminal that tells quasar-cli which environment you want to start:

QENV=development quasar dev

This is important! Without QENV=development nothing will be done here! While VueJS itself offers a very easy way to accomplish this, Quasar folks have reinvented the wheel for some reasons. Good to know, isn’t it?

5. don’t expect anything in “console.log(process.env)”, it will stay empty

6. access your Env-Variables with:

console.log(process.env.API_HOST)