CODEWITHSUNDEEP
laravelvue.js
Kishan Patel
Kishan Patel

Reputation: 485

How to get a Environment variable in VueJs componets

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

Upvotes: 1

Views: 1638

Answers (2)

Jaskaran Singh
Jaskaran Singh

Reputation: 914

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

Upvotes: 0

Jignesh Joisar
Jignesh Joisar

Reputation: 15085

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

Upvotes: 4

Related Questions