How to get a Environment variable in VueJs componets

Question

Need one help from anyone.

How to get environment variable which is defined under the .env file in Laravel project and i want to access this environment in vuejs component.

.env file

SECREAT_KEY=<My secreat key here>

And i want to access same variable under the login components

export default {
       name: 'login',
        data () {
            return {
                login: {
                    username: '',
                    password: '',
                    grant_type: 'password',
                    client_id: <client id>,
                    client_secret: <SECREAT_KEY I want access here>
                },
                submitted: false
            }
        }
}

You have to reload the bundle for the changes to take effect — Gopal Joshi, Dec 04 '18 at 05:20

score 4 · Accepted Answer · answered Dec 04 '18 at 05:41

4

by creating separate environment variable prefix with MIX_

IN .env file

MIX_SECREAT_KEY = 123456789

after adding environment variable in .env file now in a vue u can access by process.env object for example..

  process.env.MIX_SECREAT_KEY

before u access environment variable first you need to restart the watch task

answered Dec 04 '18 at 05:41

Jignesh Joisar

13,720
5
57
57

This is not working in after the app has been built and deployed, as process.env is available only when run with Webpack / Node development server...? – ux.engineer Dec 02 '19 at 17:04

score 0 · Answer 2 · answered Dec 04 '18 at 06:09

In your layout file (mostly: app.blade.php) add this before closing head tag:

<script>
var APP_NAME = <?php echo json_encode([
  "secret_key" => config('services.secret_key')
]); ?>
</script>

In your config/services.php: add your secret key

[
  'secret_key' => env('SECRET_KEY'),
]

Now, in your vue file or any js file you can access it like

APP_NAME.secret_key

How to get a Environment variable in VueJs componets

2 Answers2