Getting env data in vue component

Question

How can I have .env data such as APP_NAME in my components?

Let say I want to show to users Welcome to {{APP_NAME}}

UPDATE

Base on this document I've made changes in my env file and like:

MIX_APP_NAME=Laravel

and added this to my component script:

data() {
  return {
    app_name: process.env.MIX_APP_NAME,
  }
},

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:

- title=".... by {{app_name}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

My code:

<span data-toggle="tooltip" data-placement="top" title="... {{app_name}}"></span>

Any idea?

Answer 1

First add to env file:

MIX_APP_NAME=Laravel

and add this to your component script:

data() {
  return {
    app_name: process.env.MIX_APP_NAME,
  }
},

Now you can use it like this:

 <div :title="`text ${app_name}`"></div>

Or:

{{ app_name }}

Source

Answer 2

thats worked for me without adding any require in webpack.mix

... just add a new variable in env file with this prefix : MIX_

BUT need to restart with php artisan serve and also restart with npm run watch ....