title: How to use dotenv with Vue.js
body: <p>I'm trying to add some environment variables into my vue app.</p>
  
  <p>here is content of my <code>.env</code> file, which is placed on root(outside <code>src</code>):</p>
  
  <pre><code>VUE_APP_GOODREADS_KEY = my_key
  </code></pre>
  
  <p>and I added code for dot env on the top of my <code>main.js</code></p>
  
  <pre><code>import Vue from 'vue'
  import App from './App'
  import VueResource from 'vue-resource'
  import Vuetify from 'vuetify'
  
  import dotenv from 'dotenv'
  
  dotenv.config()
  
  import { router } from './router'
  import store from './store'
  </code></pre>
  
  <p>I want to use this variable within my store <code>./store/index.js</code></p>
  
  <p>I tried to console.log environment variables within store but no luck:</p>
  
  <pre><code>console.log(process.env)
  </code></pre>
  
  <p>But all I'm getting is </p>
  
  <pre><code>NODE_ENV:"development"
  </code></pre>
  
  <p>Only related thread I found was <a href="https://stackoverflow.com/questions/39426214/load-environment-variables-into-vue-js">Load environment variables into vue.js</a>, but it only mentions how to use existing variables in the <code>process.env</code>. I want to add environment variables using dotenv. Why this code is not working?</p>