[docs] Availability of process environment variables

When using the Quasar CLI, if I have:

data () {
	return {
		process: process,
		env: process.env
	}
},

and in the template:

{{ process.env.DEV }} / {{ env.DEV }}

it ouputs : / true (seen in the browser and in cordova)

So AFAIK it means that process or env itself is reassigned at some point, and only keeping a direct reference to the process.env object at the creation of the component works.

This is the console log of process later on when the env object is empty:

If it’s not a bug I believe it should be documented on this page: https://quasar.dev/quasar-cli/cli-documentation/handling-process-env.

Thank you

[MartinManev]

The process object is only available in the context of a node.js application. Webpack automatically removes it for you.

For Vue CLI there is some documentation here: https://cli.vuejs.org/guide/mode-and-env.html#modes

Note that only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin.

How WebPack’s DefinePlugin works is explained here: https://webpack.js.org/plugins/define-plugin/

The Quasar CLI works a bit differently than the Vue CLI, but I believe the idea is the same. There is even a section that explains how it (Webpack) strips out code when running in different modes: https://quasar.dev/quasar-cli/cli-documentation/handling-process-env#Stripping-out-code

Edit: The above Quasar CLI documentation page does not mention Webpack at all. I think it should be updated to be more descriptive.

[nothingismagick]

Be careful, especially if you are using either of the @quasar/qenv or @quasar/dotenv app extensions in the Quasar CLI (which is what we recommend).

While @MartinManev makes a good point, he is comparing Vue CLI to Quasar CLI. They are very different things.