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

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"></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?

via Chebli Mohamed