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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

In the real world, it will look like so

data() {
   return() { 
     api_key: process.env.MIX_API_KEY
  }
}
Enter fullscreen mode Exit fullscreen mode

and perfection! We can now use the laravel .env file to host and use any variables we don't want to store in javascript.