CODEWITHSUNDEEP
laravelvue.js
mafortis
mafortis

Reputation: 7128

Getting env data in vue component

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?

Upvotes: 3

Views: 5532

Answers (4)

Shahmir Jadoon
Shahmir Jadoon

Reputation: 660

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

Upvotes: 1

saber tabatabaee yazdi
saber tabatabaee yazdi

Reputation: 4959

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

Upvotes: 2

Илья Зелень
Илья Зелень

Reputation: 8078

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

Upvotes: 3

Helping hand
Helping hand

Reputation: 2920

you can directly use it as process.env.APP_NAME

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

Upvotes: 0

Related Questions