I'm trying to write a small Vue plugin that just returns the env variable content. Similar to PHPs env() method. Context: I need a url in multiple components, obviously I put this in the .env file because it could possibly change in the future. You cannot use process.env inside of the components template though because: Property or method "process" is not defined on the instance but referenced during render.

This is what I've tried to far: I call the prototype function in a mounted hook like this: console.log('test: ' + this.env('MIX_COB_PARTNER_URL'));

import _get from "lodash/get";

const Env = {
    // eslint-disable-next-line
    install(Vue, options) {
        Vue.prototype.env = function (name) {
            console.log(name); // "MIX_VARIABLE"
            console.log(typeof name); // string

            // variant 1
            return process.env[name]; // undefined

            // variant 2
            return process.env["MIX_VARIABLE"]; // "works" but isnt dynamic obviously

            // variant 3-5 with lodash
            return _get(process.env, name); // undefined
            // or
            return _get(process, 'env[' + name + ']'); // undefined
            // or
            return _get(process.env, '[' + name + ']'); // undefined, worth a try lol
            
            // variant 6
            const test = "MIX_VARIABLE"
            return process.env[test]; // again just for the sake of trying
        }
    }
}

export default Env;

I know that usually object[variable] works fine. But somehow it doesnt in this case, maybe it has to do with the fact that the process.env is empty when accessed without a key and the [name] ist as "direct" as .MIX_VARIABLE would be.

Does this just not work? Ive researched and found some people (e.g. here on SO) suggesting this type of accessing (process.env[variable]) so I'm not sure.