How I Share Laravel's Config Values with Inertia

When building your Laravel apps, it's common to use config() values on the frontend. This may be used to check if a feature is enabled, displaying a predefined value, using public keys in JS for services like Stripe, etc.

Think about how we'd do this if we were using Blade. It's easy, we can just call the config() helper or reference the Config facade.

config('services.stripe.public_key');

However, with Inertia, it's not so straightforward. You'd probably need to pass the value down as a local prop.

public function show(): Response
{
     return Inertia::render('Payment/Show', [
          'publicKey' => config('services.stripe.public_key');
     ]);
}

This works reasonably well. But, wouldn't it be nice to have a config() helper function on the frontend as well? That way, we could interact with it just as we might within our Blade files: config('services.stripe.public-key').

Let's see how we can make it work.

The Helper Function

The first step is to define the function and work our way backwards. We'll create a config() helper within resources/js/helpers.js. This is just a JavaScript helper file where I like to define a bunch of helper functions. Of course, you're free to store it anywhere you wish.

import { usePage } from "@inertiajs/vue3";

export const config = (key, $default = null) => {
    return usePage().props.config[key] ?? $default;
}

Notice that we're just pulling config keys from Inertia's shared props. Your next question is probably "Okay, but how do we get the values passed via that prop?"

The Inertia Middleware

Inertia ships with a HandleInertiaRequests middleware. This middleware provides the ability to pass down shared props that are merged with the local props from your controller. In this middleware, we'll define a static property to hold the config keys that we wish to share. These keys will then be pulled from the config repository and passed onto the frontend.

class HandleInertiaRequests extends Middleware
{
    /**
     * Config keys that should be shared with the frontend.
     */
    public static $sharedConfig = [];

    /**
     * Define the props that are shared by default.
     *
     * @return array<string, mixed>
     */
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'auth' => [
               'user' => $request->user(),
            ],

            'config' => fn () => config()->get(static::$sharedConfig),
        ]);
    }
}

Note that we can pass multiple configuration keys to the config()->get() method. Their respective values will be merged and included in the returned array.

Config Macros

We need a convenient way to append keys to the middleware's sharedConfig static property so that they can be shared with the frontend. We'll create a macro on the config repository. This can typically be performed in your AppServiceProvider file.

public function boot(): void
{
     config()->macro('share', function (array $keys) {
          HandleInertiaRequests::$sharedConfig = array_merge(HandleInertiaRequests::$sharedConfig, $keys);
     });
}

Finally, we may call config()->share() from any controller with the intended keys that need to be shared with the frontend.

public function show(): Response
{
     config()->share([
          'services.stripe.public_key',
          // More keys to share ...
     ]);

     return Inertia::render('Payment/Show');
}

That's a Wrap

That's all there is to it! When we use the JavaScript config() helper in our template, we'll of course have access to the relevant shared config values.

import { config } from "@/helpers.js";

const key = config('services.stripe.public_key');