title: Getting env data in vue component
body: <p>How can I have <code>.env</code> data such as <code>APP_NAME</code> in my components?</p>
  
  <p>Let say I want to show to users <code>Welcome to {{APP_NAME}}</code></p>
  
  <h1>UPDATE</h1>
  
  <p>Base on <a href="https://laravel.com/docs/5.6/mix#environment-variables" rel="nofollow noreferrer">this document</a> I've made changes in my env file and like:</p>
  
  <pre><code>MIX_APP_NAME=Laravel
  </code></pre>
  
  <p>and added this to my component script:</p>
  
  <pre><code>data() {
    return {
      app_name: process.env.MIX_APP_NAME,
    }
  },
  </code></pre>
  
  <p>Now I can have my app name in my component but the issue is I want to use it in bootstrap tooltip and there gives me this error:</p>
  
  <pre><code>- title=".... by {{app_name}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of &lt;div id="{{ val }}"&gt;, use &lt;div :id="val"&gt;.
  </code></pre>
  
  <p>My code:</p>
  
  <pre><code>&lt;span data-toggle="tooltip" data-placement="top" title="... {{app_name}}"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Any idea?</p>