Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I'm working on a project where I'm using stripe with Laravel, Jetstream, Vuejs and Inertiajs. Usually without Inertia, we refer to our ENV variables from config, but since I want to use Stripe API key in Vue js component I'm a bit stuck. When passing the env variable like this 'stripe' => config('services.stripe.stripe_key') As a prop, it's being displayed to the user while it shouldn't as it should be secret.
So what can I do in this situation? I can't use config() in Vue components and I can't pass the key as prop to avoid it being displayed to users which may lead to fraud acts.
You cannot have keys in Javascript without giving the user access to it. That's why there are public keys and private keys. Public can go in Javascript while private cannot
You can also inject keys directly into your compiled code if needed https://laravel.com/docs/9.x/vite#environment-variables
@Sinnbeck Oh so there is no problem to refer to env variable directly from Vue component?
If so, I guess the method I found which is adding MIX_ before the env variable won't work because laravel is using Vite now. So it means I have to do something like import.meta.env.MODE according to Vite docs?
Or should I just hard paste the key between script tags and that will be alright?
@Sinnbeck Just seen your link to Laravel docs. Thanks :)
@MooseSaid you can inject it using vite exactly like with mix. I added a link to my answer above
@sinnbeck Hi Can I ask a question how I can center inertia progress bar in laravel vue and inertia application
Please or to participate in this conversation.