Should I prop-drill usePage contents?

I have this in App.vue

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

	const page = usePage();
	const auth = computed(() => page.props.auth ?= "Guest");
</script>

<template>
	You are logged in as {{ auth }}!
</template>

But then, I also need to use auth on other pages, should I just declare it in inertia declaration then use provide/inject like this

const page = usePage();
const auth = computed(() => page.props.auth ?= "Guest");

createInertiaApp({
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
    	.use(plugin)
    	.component('Head', Head)
		.provide('auth', auth)
    	.mount(el)
  }
})

or do I need to do that code block every time I needed to use the auth?

oliviacrter

3 months ago

Best Answer

Level 1

You don’t need to prop-drill or use provide/inject for usePage() data. In Inertia, the recommended approach is to access shared props directly via usePage() wherever they’re needed. It’s already reactive and available to all components, so prop drilling just adds unnecessary complexity. A clean pattern is to wrap it in a small composable: Copy code Js import { computed } from 'vue' import { usePage } from '@inertiajs/vue3'

export function useAuth() { const page = usePage() const auth = computed(() => page.props.auth ?? 'Guest') return { auth } } Then you can use it in any component: Copy code Js import { useAuth } from '@/composables/useAuth' const { auth } = useAuth() This keeps things simple, avoids repetition, and follows Inertia’s intended design.

1 like

Chron

3 months ago

Level 6

Thank you for the excellent answer!

Please or to participate in this conversation.