Using Environment Variables with Vue js

Question

I ve been reading the official docs and I m unable to find anything on environment variables  Apparently there are some community projects that support environment variables but this might be overkill for me  So I was wondering if there s something simple out of the box that works natively when working on a project already created with Vue CLI   For example  I can see that if I do the following the right environment prints out meaning this is already setup   mounted       console log process env ROOT API      I m a kinda new to env variables and Node   FYI using Vue CLI version 3 0 beta

User · Accepted Answer

If you use vue cli with the Webpack template (default config), you can create and add your environment variables to a .env file.

The variables will automatically be accessible under process.env.variableName in your project. Loaded variables are also available to all vue-cli-service commands, plugins and dependencies.

You have a few options, this is from the Environment Variables and Modes documentation:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Your .env file should look like this:

VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

It is my understanding that all you need to do is create the .env file and add your variables then you're ready to go! :)

As noted in comment below: If you are using Vue cli 3, only variables that start with VUE_APP_ will be loaded.

Don't forget to restart serve if it is currently running.

User · Answer

Important  in Vue 4 and likely Vue 3  as well    I set VUE APP VAR but could NOT see it by console logging process and opening the env object  I could see it by logging or referencing process env VUE APP VAR  I m not sure why this is but be aware that you have to access the variable directly

User · Answer

A problem I was running into was that I was using the webpack-simple install for VueJS which didn t seem to include an Environment variable config folder  So I wasn t able to edit the env test development  and production js config files  Creating them didn t help either   Other answers weren t detailed enough for me  so I just  fiddled  with webpack config js  And the following worked just fine   So to get Environment Variables to work  the webpack config js should have the following at the bottom   if  process env NODE ENV      production       module exports devtool     source-map       http   vue-loader vuejs org en workflow production html   module exports plugins    module exports plugins        concat       new webpack DefinePlugin          process env             NODE ENV    production                       new webpack optimize UglifyJsPlugin         sourceMap  true        compress            warnings  false                     new webpack LoaderOptionsPlugin         minimize  true                 Based on the above  in production  you would be able to get the NODE ENV variable  mounted       console log process env NODE ENV      Now there may be better ways to do this  but if you want to use Environment Variables in Development you would do something like the following   if  process env NODE ENV      development        module exports plugins    module exports plugins        concat       new webpack DefinePlugin          process env             NODE ENV    development                              Now if you want to add other variables with would be as simple as   if  process env NODE ENV      development        module exports plugins    module exports plugins        concat       new webpack DefinePlugin          process env             NODE ENV    development            ENDPOINT    http   localhost 3000            FOO    BAR                            I should also note that you seem to need the      double quotes for some reason   So  in Development  I can now access these Environment Variables   mounted       console log process env ENDPOINT    console log process env FOO      Here is the whole webpack config js just for some context   var path   require  path   var webpack   require  webpack    module exports       entry     src main js     output        path  path resolve   dirname     dist        publicPath    dist        filename   build js         module        rules                    test     css            use               vue-style-loader              css-loader                                     test     vue            loader   vue-loader           options              loaders                             other vue-loader options go here                                    test     js            loader   babel-loader           exclude   node modules                           test      png jpg gif svg             loader   file-loader           options              name    name   ext   hash                                  resolve        alias           vue     vue dist vue esm js             extensions          js     vue     json          devServer        historyApiFallback  true      noInfo  true      overlay  true        performance        hints  false        devtool    eval-source-map     if  process env NODE ENV      production       module exports devtool     source-map       http   vue-loader vuejs org en workflow production html   module exports plugins    module exports plugins        concat       new webpack DefinePlugin          process env             NODE ENV    production                       new webpack optimize UglifyJsPlugin         sourceMap  true        compress            warnings  false                     new webpack LoaderOptionsPlugin         minimize  true                if  process env NODE ENV      development        module exports plugins    module exports plugins        concat       new webpack DefinePlugin          process env             NODE ENV    development            ENDPOINT    http   localhost 3000            FOO    BAR

User · Answer

This is how I edited my vue config js so that I could expose NODE ENV to the frontend  I m using Vue-CLI    vue config js  const webpack   require  webpack        options  https   github com vuejs vue-cli blob dev docs config md module exports            default baseUrl of     won t resolve properly when app js is being served from non-root location     baseUrl            outputDir   dist       configureWebpack            plugins                new webpack DefinePlugin                      allow access to process env from within the vue app                  process env                         NODE ENV  JSON stringify process env NODE ENV

User · Answer

If you are using Vue cli 3  only variables that start with VUE APP  will be loaded   In the root create a  env file with   VUE APP ENV VARIABLE value   And  if it s running  you need to restart serve so that the new env vars can be loaded   With this  you will be able to use process env VUE APP ENV VARIABLE in your project   js and  vue files    Update  According to  ali6p  with Vue Cli 3  isn t necessary to install dotenv dependency

User · Answer

Create two files in root folder  near by package json   env and  env production  Add variables to theese files with prefix VUE APP  eg   VUE APP WHATEVERYOUWANT serve uses  env and build uses  env production  In your components  vue or js   use process env VUE APP WHATEVERYOUWANT to call value Don t forget to restart serve if it is currently running  Clear browser cache   Be sure you are using vue-cli version 3 or above  For more information  https   cli vuejs org guide mode-and-env html

User · Answer

In the root of your project create your environment files     env  env someEnvironment1  env SomeEnvironment2   To then load those configs  you would specify the environment via mode i e   npm run serve --mode development   default mode npm run serve --mode someEnvironment1    In your env files you simply declare the config as key-value pairs  but if you re using vue 3  you must prefix with VUE APP    In your  env   VUE APP TITLE This will get overwritten if more specific available    env someEnvironment1   VUE APP TITLE My App  someEnvironment1    You can then use this in any of your components via   myComponent vue    lt template gt     lt div gt         title      lt  div gt   lt  template gt    lt script gt  export default     name   MyComponent     data         return         title  process env VUE APP TITLE                lt  script gt    Now if you ran the app without a mode it will show the  This will get     but if you specify a someEnvironment1 as your mode then you will get the title from there   You can create configs that are  hidden  from git by appending  local to your file   env someEnvironment1 local - very useful for when you have secrets    Read the docs for more info

User · Answer

For those using Vue CLI 3 and the webpack-simple install  Aaron s answer did work for me however I wasn t keen on adding my environment variables to my webpack config js as I wanted to commit it to GitHub  Instead I  installed the dotenv-webpack plugin and this appears to load environment variables fine from a  env file at the root of the project without the need to prepend VUE APP  to the environment variables

User · Answer

In vue-cli version 3  There are the three options for  env files  Either you can use  env or    env test  env development  env production  You can use custom  env variables by using the prefix regex as     instead of   VUE APP   in  node modules  vue cli-service lib util resolveClientEnv js prefixRE This is certainly not recommended for the sake of developing an open source app in different modes like test  development  and production of  env files  Because every time you npm install      it will be overridden

User · Answer

In addition to the previous answers  if you re looking to access VUE APP   env variables in your sass  either the sass section of a vue component or a scss file   then you can add the following to your vue config js  which you may need to create if you don t have one    let sav       for  let e in process env        if   VUE APP  i test e             sav        e      process env e                module exports         css            loaderOptions                sass                    data  sav                                       The string sav seems to be prepended to every sass file that before processing  which is fine for variables   You could also import mixins at this stage to make them available for the sass section of each vue component   You can then use these variables in your sass section of a vue file    lt style lang  scss  gt   MyDiv       margin  1em 0 0 0      background-image  url  VUE APP CDN   MyImg png       lt  style gt    or in a  scss file    MyDiv       margin  1em 0 0 0      background-image  url  VUE APP CDN   MyImg png        from https   www matt-helps com post expose-env-variables-vue-cli-sass

[node.js] Using Environment Variables with Vue.js

Examples related to node.js

Examples related to vue.js

Examples related to environment-variables

Examples related to vue-cli

Examples related to vue-cli-3