How to pass Laravel env data to Vue component

Question

I need to pull in my Stripe keys from my Laravel .env file and pass it into my Vue component. I read some similar questions on SO and the Laravel docs that mention doing it by simply adding the MIX prefix, and I can call process.env.MIX_STRIPE_KEY anywhere in my JS.

.env

STRIPE_KEY=pk_test_xxxxxxxxxxxxxxxxxx
STRIPE_SECRET=sk_test_xxxxxxxxxxxxxxxxxxx

MIX_STRIPE_KEY="${STRIPE_KEY}"
MIX_STRIPE_SECRET="${STRIPE_SECRET}"

In my Vue Component:

<template>
{{ stripe }} // Renders process.env.MIX_STRIPE_KEY (Not the actual key?)
...code
</template>
<script>
export default {
    data: function() {
        return {
            stripe: Stripe('process.env.MIX_STRIPE_KEY'),
...

After I did this I recompiled by npm run dev, production, watch tried all of them... Still not getting the Stripe key to show in the app.js file.

Speaking of the app.js file. I tried adding it in there as well.

const app = new Vue({
    el: '#app',
 data:{
        stripeKey: 'process.env.MIX_STRIPE_KEY',
 },

Then tried calling {{ stripKey }} in the Vue component, but that didn't render correctly either.

Any help on this would be appreciated.

If the component is in blade file, I would try to set the value to a "prop" defined in the element. As follow: — Alexandre Barbosa, Sep 20 '19 at 04:11
The component is in a blade file. Doing as you mentioned, how would you use the data in the Vue file? — daugaard47, Sep 20 '19 at 04:23
Just above the "data" function, define an array called "props" with the "prop" as needed as follows: props: ['stripe'], then in Blade: — Alexandre Barbosa, Sep 20 '19 at 04:50
@AlexandreBarbosa This solution works great as well and might be best for my specific case at the moment. Appreciate your time and help! — daugaard47, Sep 20 '19 at 04:59

score 1 · Accepted Answer · answered Sep 20 '19 at 04:06

1

You need to remove the quotes. Webpack will interpolate the value for you:

<template>
{{ stripe }} // Renders process.env.MIX_STRIPE_KEY (Not the actual key?)
...code
</template>
<script>
export default {
    data: function() {
        return {
            stripe: Stripe(process.env.MIX_STRIPE_KEY),
...

Will compile as:

<template>
{{ stripe }} // Renders process.env.MIX_STRIPE_KEY (Not the actual key?)
...code
</template>
<script>
export default {
    data: function() {
        return {
            stripe: Stripe("pk_test_xxxxxxxxxxxxxxxxxx"),
...

answered Sep 20 '19 at 04:06

Eric Tucker

6,144
1
22
36

‍♂️ Oh Jeez, thank you, that worked! If you wouldn't mind me asking one more... How/Where would I use the if else statement to use test keys in dev and production keys in production? Similar to this `if ( process.env.Mix_APP_ENV == 'production' ) { use production keys } else { use test keys }` – daugaard47 Sep 20 '19 at 04:21
1

hehe, no worries, happy to help! Webpack will similarly swap out `process.env.NODE_ENV` with `production` when building in production mode. So `Stripe(process.env.NODE_ENV === 'production' ? process.env.MIX_PROD_KEY : process.env.MIX_DEV_KEY)` should work. – Eric Tucker Sep 20 '19 at 04:31
Thanks for the follow up. Trying to wrap my head around that. Where would you put that statement and should I add both Dev and Production keys to my .env file since Webpack has to compile for it to work? – daugaard47 Sep 20 '19 at 04:36
1

It really depends on your use case. Behind the scenes, mix uses the webpack define plugin (https://webpack.js.org/plugins/environment-plugin/) and filters out everything from `.env` that isn't prefixed with `MIX_`. Where you place that is up to you. There are some good suggestions here: https://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack I really like the alias config so you can actually separate those in different files to be included based on `NODE_ENV` – Eric Tucker Sep 20 '19 at 04:53
1

Thank you for all the help. This is good info. Appreciate it! – daugaard47 Sep 20 '19 at 04:57

score 0 · Answer 2 · answered Mar 12 '20 at 00:10

0

Note for future readers: do not place your STRIPE_SECRET into Mix as this may make it exposed to the browser and any user that decides to snoop in it.

answered Mar 12 '20 at 00:10

Flipper

2,589
3
24
32

How to pass Laravel env data to Vue component

2 Answers2