title: How to pass runtime environment variables to client side in NuxtJS SSR application
body: <p>My NuxtJS applications makes HTTP request to a backend API. I am using <code>nuxtjs/axios</code> pluging to make these requests. I have configured base URL for API in <code>nuxt.config.js</code> like below</p>
  <pre><code>axios: {
    baseURL: process.env.BASE_URL,
  },
  </code></pre>
  <p><strong>In Local</strong>, I have a <code>.env</code> like below</p>
  <blockquote>
  <p>BASE_URL=http://localhost:8080</p>
  </blockquote>
  <p><strong>On AWS ECS Container</strong>, I have declared environment variable with</p>
  <blockquote>
  <p>Key: <code>BASE_URL</code> and Value: <code>https://example.com</code></p>
  </blockquote>
  <p>On running the application following happens</p>
  <ul>
  <li>When application is server-side rendered, base URL for API is resolved correctly e.g <code>https://example.com/previews</code></li>
  <li>When application is client-side rendered, base URL for API is not resolved to <code>https://example.com</code> but rather to the same IP address that my web application is accessible on.</li>
  </ul>
  <p>So, what I understand might be happening is, that the <code>process.env.BASE_URL</code> is not getting passed from the <code>server-side(NodeJS server)</code> to <code>client-side(Web Browser)</code>. Hence it is falling back to the application's IP address.</p>
  <p>Any idea why such a behavior and how to pass the environment variable to client-side as well? Or what might be causing this.</p>
  <p>Thanks.</p>