title: Pass environment variable into a Vue App at runtime
body: <p>How can I access environment variables in Vue, that are passed to the container at runtime and not during the build?</p>
  <p>Stack is as follows:</p>
  <ul>
  <li>VueCLI 3.0.5</li>
  <li>Docker</li>
  <li>Kubernetes</li>
  </ul>
  <p>There are suggested solutions on stackoverflow and elsewhere to use .env file to pass variables (and using mode) but that's at build-time and gets baked into the docker image.</p>
  <p>I would like to pass the variable into Vue at run-time as follows:</p>
  <ul>
  <li>Create Kubernetes ConfigMap (I get this right)</li>
  <li>Pass ConfigMap value into K8s pod env variable when running deployment yaml file (I get this right)</li>
  <li>Read from env variable created above eg. VUE_APP_MyURL and do something with that value in my Vue App (I DO NOT get this right)</li>
  </ul>
  <p>I've tried the following in helloworld.vue:</p>
  <pre><code>&lt;template&gt;
  &lt;div&gt;{{displayURL}}
    &lt;p&gt;Hello World&lt;/p&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {  
      data() {
          return {
              displayURL: &quot;&quot;
          }
      },
      mounted() {
          console.log(&quot;check 1&quot;)
          this.displayURL=process.env.VUE_APP_ENV_MyURL
          console.log(process.env.VUE_APP_ENV_MyURL)
          console.log(&quot;check 3&quot;)
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>I get back &quot;undefined&quot; in the console log and nothing showing on the helloworld page.</p>
  <p>I've also tried passing the value into a vue.config file and reading it from there. Same &quot;undefined&quot; result in console.log</p>
  <pre><code>&lt;template&gt;
  &lt;div&gt;{{displayURL}}
    &lt;p&gt;Hello World&lt;/p&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  const vueconfig = require('../../vue.config');
  export default {  
      data() {
          return {
              displayURL: &quot;&quot;
          }
      },
      mounted() {
          console.log(&quot;check 1&quot;)
          this.displayURL=vueconfig.VUE_APP_MyURL
          console.log(vueconfig.VUE_APP_MyURL)
          console.log(&quot;check 3&quot;)
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>With vue.config looking like this:</p>
  <pre><code>module.exports = {
      VUE_APP_MyURL: process.env.VUE_APP_ENV_MyURL
  }
  </code></pre>
  <p>If I hardcode a value into VUE_APP_MyURL in the vue.config file it shows successfully on the helloworld page.</p>
  <p>VUE_APP_ENV_MyURL is successfully populated with the correct value when I interrogate it: kubectl describe pod </p>
  <p>process.env.VUE_APP_MyURL doesn't seem to successfully retrieve the value.</p>
  <p>For what it is worth... I am able to use process.env.VUE_APP_3rdURL successfully to pass values into a Node.js app at runtime.</p>