Using Inertia page props to share data between Vue components

In Laravel applications with Inertia.js and Vue, sharing data between components often involves provide/inject patterns, or custom composables.

Inertia's page props offer a simple built-in alternative. They require no additional setup.

How It Works

Inertia page props provide a straightforward mechanism for data sharing. Here's what you need to know:

1. They are initially set on the server side.
2. Inertia passes them to the frontend on page load.
3. They are globally accessible throughout your Vue application.
4. They are reactive by default, ensuring your components stay up-to-date.

Implementation

Let's walk through the implementation process, starting from the server and moving to the frontend components.

Server-Side: Setting Initial Props

First, we need to set up our initial props on the server. This is typically done in the HandleInertiaRequests middleware:

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'credits' => $request->user()->credits,
        ]);
    }
}

This code adds a 'credits' property to our Inertia page props, making it available to all components in our Vue application.

Component A: Consuming Props

Now, let's look at a component that consumes these props. This component will display the user's credits:

<script setup>
import { computed } from 'vue';
import { usePage } from '@inertiajs/vue3';

const page = usePage();
const credits = computed(() => page.props.credits);
</script>

<template>
    <div>Credits: {{ credits }}</div>
</template>

This component uses Inertia's usePage composable to access the page props. We create a computed property credits that will automatically update whenever the page.props.credits value changes.

Component B: Updating Props

Next, let's examine a component that updates the credits value:

<script setup>
import { usePage } from '@inertiajs/vue3';
import axios from 'axios';

const page = usePage();

const updateCredits = async () => {
    const response = await axios.post('/api/use-credits');
    page.props.credits = response.data.credits;
};
</script>

This component defines an updateCredits function that makes an API call and then updates the credits value in the Inertia page props. The beauty of this approach is that any other component using this prop (like Component A) will automatically update to reflect the new value.

Advantages

Using Inertia page props for inter-component communication offers several benefits:

1. Simplicity: There's no need for additional libraries or complex setup.
2. Global Accessibility: These props are available throughout your Vue application.
3. Reactivity: Components using these props will automatically update when the values change.
4. Server Integration: You can easily set the initial state on the server side.
5. Performance: This method is lightweight and doesn't add any additional JavaScript overhead.

Considerations

While this approach is powerful, it's important to keep a few things in mind:

1. It's best suited for global, infrequently changing data.
2. Overusing this method can potentially impact initial page load times if you're passing large amounts of data.
3. For complex state management scenarios, you might still need to consider more robust solutions.

What I'm building

Delegate tasks. Get software.

Give Vroni a GitHub issue, bug report, spec, or rough idea. It reads the repo, plans the change, writes code, runs checks, and works toward a review-ready pull request.

Take a look at vroni.com