8

I am starting with the Inertia Laravel example https://github.com/drehimself/inertia-example

which is nothing but Laravel with Vue in one monolithic codebase, using Inertia.js: https://github.com/inertiajs/inertia-laravel https://github.com/inertiajs/inertia-vue

I am trying to access Laravel's .env variables inside my .vue component files

.env file:

APP_NAME=ABC

In app\Providers\AppServiceProvider.php:

public function register()
{
    Inertia::share('appName', env('APP_NAME'));
}

In resources\js\Home.vue component:

<template>
  <div>
        <span class="tw-text-left">{{ appName }}</span>
  </div>
</template>

<script>
export default {
  props: [
    "appName",
 ]
}
</script>

In my vue console, appName shows up blank. It should show "ABC" but doesn't. What's going on here, and how I can access all my env variables, ideally without passing everything through the controller, which doesn't seem very efficient?

kp123
  • 1,250
  • 1
  • 14
  • 24
  • Wanted to point out, don't know if you have already corrected. env('APP_NAME ') seems to have an extra space. I believe it should be like env('APP_NAME'). – N0000B Jul 25 '19 at 18:06
  • Yes @N0000B thats been fixed. – kp123 Jul 25 '19 at 22:24

5 Answers5

5

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!

kp123
  • 1,250
  • 1
  • 14
  • 24
5

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 }}
almyz125
  • 648
  • 1
  • 7
  • 18
  • Won't this expose the env information from the fronend side? Since it displays as a prop it will be available for everyone. So what if I want to use api key? – Mostafa Said Sep 24 '22 at 14:50
  • 1
    @MostafaSaid Yes, you're right - this will expose the env variable on the client and you **should not** do this for any secret keys. Anyone will be able to see it. – Obvious_Grapefruit Nov 04 '22 at 01:38
  • In Laravel 10, Inertia, Vue3 I can access the env with ```{{ $page.props.appName }}``` – A.W. May 26 '23 at 18:22
1

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>
atymic
  • 3,093
  • 1
  • 13
  • 26
  • I tried that, and it results in an error in the console: [Vue warn]: Injection "page" not found I think that blog post you pointed out is 2 months old, not sure if "inject" is still supported :( – kp123 Jul 25 '19 at 06:18
1

if you want to share multiple variables with view use the following:

Inertia::share('app', [
        'name' => config('app.name'),
        'url' => config('app.url'),
    ]);
Shoaib Rehan
  • 526
  • 6
  • 16
0

if you are using inertia with vite, you can access like below

const cek = import.meta.env.VITE_GEO_API_BASE_URL
console.log(cek)

you can read more about vite env https://dev.to/arielmejiadev/load-laravel-env-variables-into-client-code-with-vite-9ld

Alauddin Afif Cassandra
  • 481
  • 6
  • 10