This used to drive me nuts, many times I wanted a .env in Vue that was easy to use and maintain. So when I had a Laravel back end I found the best way was to use the .env that comes with Laravel and pull variables from there.
So how do we do it?
Let's say we have an API key and of course we do not want people to be able to see it on the Javascript end. We start by defining the variable in the .env. We define mixable variables using 'MIX'.
MIX_API_KEY=this_will_be_our_key
So as long as we run
php artisan config:clear
we can now use the variable in our component.
To use it we simply call
process.env.MIX_API_KEY
In the real world, it will look like so
data() {
return() {
api_key: process.env.MIX_API_KEY
}
}
and perfection! We can now use the laravel .env file to host and use any variables we don't want to store in javascript.
Top comments (3)
I have an issue I want to access variables inside .env through process.env.VARIABLE_NAME, but give me some error.I am working on laravel Pusher with VueJs.
bootstrap.js
My Vue File
Error:
Code works fine to broadcast event to pusher, but have problem in receiving through 'Echo'
Have you re complied ?
etc
Thank you I already solved it, here is my solution:
dev.to/irfanullahshakir/comment/15en1