I am struggling to retrieve my Stripe keys from my Laravel .env file and pass them into my Vue component. I came across some similar inquiries on Stack Overflow and the Laravel documentation that suggest using the MIX prefix, allowing me to access process.env.MIX_STRIPE_KEY in my JavaScript code.
.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 }} // Displays process.env.MIX_STRIPE_KEY (Not the actual key?)
...code
</template>
<script>
export default {
data: function() {
return {
stripe: Stripe('process.env.MIX_STRIPE_KEY'),
...
Despite recompiling with npm run dev, production, watch, I am still unable to see the Stripe key in the app.js file.
Regarding the app.js file, I also attempted adding it there.
const app = new Vue({
el: '#app',
data:{
stripeKey: 'process.env.MIX_STRIPE_KEY',
},
Subsequently, when trying to call {{ stripKey }} in the Vue component, it did not render correctly either.
If anyone has any insights on this issue, your assistance would be greatly appreciated.