Accessing Laravel's .env variables inside Inertia.js Vue files Accessing Laravel's .env variables inside Inertia.js Vue files vue.js vue.js

Accessing Laravel's .env variables inside Inertia.js Vue files


I finally got it working. Here's how, for those interested:In AppServiceProvider:

        Inertia::share(function () {            return [                'app' => [                    'name' => config('app.name'),                ],            ];        });

In your vue file:

<template><div>App name: {{ $page.app.name }}</div></template>

The 2nd part is what I was missing..I was trying to accept the app.name prop, and was missing $page. Hope this helps somebody!


I know this is kind of old, but I ran into this same issue and the methods above and around the net did not work for me. Something might have changed with Inertia? Anyway, I did get it working though.

Just like above add the following to the register method within your AppServiceProvider:

Inertia::share('appName', config('app.name'));// I'm using config, but your could use env

Then in your Vue component access the $inertia variable like so:

{{ $inertia.page.props.appName }}


From the documentation on the author's website, you need to instruct vue to inject the page into your component, and then you can accessed the shared variables.

For example:

<template>  <div>        <span class="tw-text-left">{{ page.props.appName }}</span>  </div></template><script>export default {  inject: ['page'],  // ...}</script>