Need to get Env Variables

I have text boxes and want to show Variables from .env file

How can i get variables and Show them?

Thanks

Hopefully I will get response about this issue.

I have html form and text boxes in that form where I want to show variables from .env file and also want to save that at clicking on Save Button

Waiting for your response.

Thanks

You can access .env variables with process.env.VARIABLE_NAME

https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

If you’re referring to saving the variables back to the .env file, you can’t do that. They are read only.

I am using below code but its not working

<template>
 <div class="vx-row">
   <vx-card title="Twilio Configuration">
<vs-list-header title="Twilio Details"></vs-list-header>
<div class="flex p-0 bg-white" style="margin-top:20px">
	<vs-input type="text" class="mt-2 mr-4" style="width:32% !important;" label-placeholder="Twilio SSID" v-model="twilio_sid" name="twilio_ssid" v-validate="'required'" />	
</div>
<span class="text-danger text-sm" v-show="errors.has('twilio_ssid')">{{ errors.first('twilio_ssid') }}</span>

<vs-divider class="d-theme-border-grey-light" />
<div class="flex flex-wrap items-center justify-end">
	<vs-button color="primary">Save</vs-button>
</div>
</vx-card>
</div>
</template>
<script>
export default {
    data () {
        return {
             twilio_sid: process.env.TWILIO_SID,
        }
     }
}

Dear James
Can you please guide me that what’s wrong I’m doing in that?
Also How can I post this form to an External URL but clicking on Save button ?

Thanks

Hello @JamesThomson
Can you please guide by checking above code that what’s mistake I’m doing there? Why not able to retrieve Variables?

Thanks

Did you read the documentation link I provided? There are certain naming rules you need to adhere to. You need to prefix your env vars with VUE_APP_.

Note that only NODE_ENV , BASE_URL , and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin . It is to avoid accidentally exposing a private key on the machine that could have the same name.

yes. in .env file this is full variable name

VUE_APP_TWILIO_SID = sadjk234j2kl342kl324kjl234

Like this. Can you please check if rest is fine? And how can i post this form to external url using this save button?

Thanks for your great help

That should work. Make sure you restart your dev server after adding the .env variable.

Its still not working. I restarted dev server twice. Can you please check in this template file. I think there must be some mistake.

Thanks

Your provided code still isn’t using VUE_APP_.

It should be

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

I tried that as well but its not working. I am restarting dev server by
npm run dev but no use. Really I am worried about this since weeks :frowning:

Thanks so much

Can you please help me in this matter?
Or if this is not working can you please tell me that how can i dispaly json variables got with url like

https://someurl.com and it will send json string and I can display that here?

Thanks

Hello @JamesThomson
Hopefully you are doing great. I am still not able to resolve this issue. This code is not working like you said to include it VUE_APP_ is still not working. I pasted all code as well.
If you can guide it will be great.

Thanks