1

My question is simple as the title itself. I know that we can manually create and define environment variables based on the environment mode development or production. Or even we can create specific situations and dynamically import components and files based on the environment variables.

But here is my question in depth; Is there a way to define environment variables from outside? I mean not typing all of them in the .env file but sending the list of variables via an API or a backend service.

The second part of my question, is there a way to update value of an environment variable in the run time? I know that we have to serve the whole project again when we change an environment variable but I want to change the value of a specific environment variable based on a condition.

I want to change the whole template of the vue project, in other words, I need to recompile some specific components like Sidebar, Topbar, Footer, ContentMenu etc... I thought that I could do it with conditions based on environment variables. I defined theme variables in .env and I dynamically import the components based on theme selections and modes. But sometimes I will need to update some of my environment variables and more important, I need to declare them outside and pass into the Vue project. Is there a way to do it, or is it just my imagination? :) Thanks in advance.

Improve this question
3
  • For changing environment variables value, you'll need to rebuild the project. You can use an external API to fetch the required variables on run time, but make sure no sensitive info is exposed in the API. Commented Aug 25, 2021 at 9:18
  • You are abusing environment variables. Which usually results in unexpected behavior. Commented Aug 26, 2021 at 4:35
  • Okay then can you give me a better way to build a single Vue project with different themes and theme's all the dependencies (Styles, scripts, components, data...) I basically import everything based on conditions from env variables so that if a specific theme doesn't need other files, they don't even built in the distrubution version. By the way the theme selection will not be given to the end user, I only need to build the project based on my theme selection. I mean If I go npm run build --mode HorizontalTheme, it'll only build the necessary files. Is there another way to do that? Commented Aug 26, 2021 at 8:54

1 Answer 1

Reset to default
2

I need to recompile some specific components like Sidebar, Topbar, Footer, ContentMenu etc... I thought that I could do it with conditions based on environment variables

Environment Variables isn't the way to do it.

Suppose you wish to have different themes for your website (Theme #1, Theme #2, Theme #3)

You can store the activeTheme in Vuex store (or in a remote database and fetch on runtime with an API call) and then in your components, load the template/css accordingly by comparing with the activeTheme variable.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I have done it before with environment variables. I controlled all the css javascript and vue components based on the status of the env variables and I built the projects with the --mode information. It's kind of a brute way to do it but I managed anyway.
Well you can do whatever works for you. But as the name suggests, you should use environment variables for environment specific value only like base urls etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.