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: <my-element :data="{{ env('MIX_STRIPE_KEY') }}"></my-element> — Alexandre Barbosa
– Alexandre Barbosa, Commented Sep 20, 2019 at 4:11
The component is in a blade file. Doing as you mentioned, how would you use the data in the Vue file? — daugaard47
– daugaard47, Commented Sep 20, 2019 at 4:23
Just above the "data" function, define an array called "props" with the "prop" as needed as follows: props: ['stripe'], then in Blade: <my-element :stripe="{{ env('MIX_STRIPE_KEY') }}"></my-element> — Alexandre Barbosa
– Alexandre Barbosa, Commented Sep 20, 2019 at 4: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
– daugaard47, Commented Sep 20, 2019 at 4:59

Eric Tucker · Accepted Answer · 2019-09-20 04:06:11Z

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, 2019 at 4:06

Eric Tucker

6,3851 gold badge28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

daugaard47 Over a year ago

🤦‍♂️ 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 }

Eric Tucker Over a year ago

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.

daugaard47 Over a year ago

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?

Eric Tucker Over a year ago

It really depends on your use case. Behind the scenes, mix uses the webpack define plugin (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: stackoverflow.com/questions/30030031/… I really like the alias config so you can actually separate those in different files to be included based on NODE_ENV

daugaard47 Over a year ago

Thank you for all the help. This is good info. Appreciate it!

Flipper · Accepted Answer · 2020-03-12 00:10:28Z

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, 2020 at 0:10

Flipper

2,6033 gold badges25 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to pass Laravel env data to Vue component

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related