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?

@ИльяЗеленько it doesn't give error but also print like ${app_name} in my view — mafortis
– mafortis, Commented Aug 12, 2018 at 6:34
@ИльяЗеленько that will do it :) please share it as answer i'll accept it — mafortis
– mafortis, Commented Aug 12, 2018 at 6:36

Илья Зелень · Accepted Answer · 2018-08-12 06:40:47Z

3

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

answered Aug 12, 2018 at 6:40

Илья Зелень

8,2683 gold badges48 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

saber tabatabaee yazdi Over a year ago

thats worked for me without any require in webpack.mix ... just add a new variable in env file with this prefix : MIX_ but need to restart php artisan serve and also restart npm run watch....

saber tabatabaee yazdi · Accepted Answer · 2020-05-29 04:52:07Z

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 ....

edited May 29, 2020 at 4:52

answered Feb 24, 2020 at 14:52

saber tabatabaee yazdi

4,9953 gold badges53 silver badges63 bronze badges

Comments

Shahmir Jadoon · Accepted Answer · 2023-10-14 05:28:01Z

1

For Laravel 10.x:

You may inject environment variables into your JavaScript by prefixing them with VITE_ in your application's .env file:

VITE_APP_NAME=http://example.com

You may access injected environment variables via the import.meta.env object:

import.meta.env.VITE_APP_NAME

You can find the laravel documentation

answered Oct 14, 2023 at 5:28

Shahmir Jadoon

6908 silver badges6 bronze badges

Comments

Helping hand · Accepted Answer · 2018-08-12 06:15:22Z

0

you can directly use it as process.env.APP_NAME

mounted(){
   this.appName=process.env.APP_NAME
}

answered Aug 12, 2018 at 6:15

Helping hand

2,9602 gold badges21 silver badges33 bronze badges

5 Comments

mafortis Over a year ago

i found this as well laravel.com/docs/5.6/mix#environment-variables but it gives error on npm run watch

Helping hand Over a year ago

Are you using vue-cli?

Helping hand Over a year ago

How are you setting the variable in environment, maybe you are setting it in wrong way.

mafortis Over a year ago

MIX_APP_NAME=Laravel

mafortis Over a year ago

Updated my question please check it

Collectives™ on Stack Overflow

Getting env data in vue component

UPDATE

4 Answers 4

1 Comment

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

4 Answers 4

1 Comment

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related