Retrieve config and env variable in vue component

Question

I have a Vue component in my Laravel application.

I want to retrieve a URL that is in a config (or the .env Laravel file) directly in my Vue component, instead of hardcoding it. In webpack laravel mix I can retrieve my .env variable like this.

require('dotenv').config() let proxyUrl = process.env.APP_URL

But when I want to do this in my app.js, I have a can't resolve fs when trying to require dotenv.

What is the best way to have this data available in my Vue components ?

Andre W. · Answer 1 · 2020-09-23T13:58:53.253

To access your env variables in a Vue Component file in Laravel, you will need to prefix your variable with MIX_.

In the .env file

To take your case as an example, if you intend to use APP_URL as a variable in your .env file, instead of APP_URL, you should use MIX_APP_URL like:

MIX_APP_URL=http://example.com

In your Vue Component file

You then access the variable by using the process.env object in your script like:

process.env.MIX_APP_URL

Say today you set a property named proxyUrl and assign the variable as its value, in your script in the .vue file, the code should look like:

export default {
  data () {
        return {
          proxyUrl: process.env.MIX_APP_URL,
        },
  }
}

After that you should be able to retrieve the property in your vue template as normal like:

<template>
    <div>

        //To print the value out
        <p>{{proxyUrl}}</p>

        // To access proxyUrl and bind it to an attribute
        <div :url='proxyUrl'>Example as an attribute</div>
    </div>
</template>

Here is the official doc released in Laravel 8.x, in case you want to have a look.

You do need to restart npm run watch after you do this. – Jafo Apr 22 '20 at 15:15 — Jafo, Apr 22 '20 at 15:15

score 8 · Accepted Answer · answered Apr 05 '18 at 09:41

I had this same issue, but placing the variable in blade was not an options for me, also it meant having a variable declare in a blade file and then use in a javascript file which seems a bit unorganized. So if you are in this same position then I think there is a better solution. If you are using Vue you most likely are compiling your files using Laravel mix.

If this is the case you can inject environment variables into Mix, you just need to add the prefix MIX_. So you can add to your .env file a variable like:

MIX_SENTRY_DSN_PUBLIC=http://example.com

and then access this variable like this in your javascript file:

process.env.MIX_SENTRY_DSN_PUBLIC

you can access this anywhere in your pre compile file. You can find this information in the laravel documentation. https://laravel.com/docs/5.6/mix#environment-variables

I have the same problem, i am getting the error ReferenceError: process is not defined Any help? — user2644503, Mar 03 '21 at 22:09

agm1984 · Answer 3 · 2018-10-30T17:33:20.447

4

IMPORTANT

You have to reload the bundle for the changes to take effect.

Mine didn't work until I killed the dev bundle and re-ran npm run watch.

edited Oct 30 '18 at 17:33

answered Oct 30 '18 at 02:33

agm1984

15,500
6
89
113

score 2 · Answer 4 · answered Feb 14 '18 at 11:16

2

You can do this in Blade template:

let window.something = {{ config('seme_config.something') }}

Then just use the variable in JS with:

window.something

Also, you shouldn't use env() helper directly. Extract data from config file only.

answered Feb 14 '18 at 11:16

Alexey Mezenin

158,981
26
290
279

1

I'm not sure I understand. In my app.js I can't use Blade template. – Komarzer Feb 14 '18 at 11:25
where you include the script for your `app.js` (``), on that blade file add `` – H H Feb 14 '18 at 11:31
@Komarzer if you don't like this solution, you can [read a config file](https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file) and parse it in `app.js` or use some package that allows you to do that automatically. – Alexey Mezenin Feb 14 '18 at 11:41

Retrieve config and env variable in vue component

4 Answers4

Linked