Problems with `usePage()` in Inertia + Vue3 when using inertiajs/vue3

Question

Here's the code inside my Vue component:

import { usePage }             from '@inertiajs/vue3';
import { usePage as usePage2 } from '@inertiajs/inertia-vue3';

const page = usePage();
console.log('page', page, page.props, page.value);
const page2 = ref(usePage2());
console.log ('page2', page2, page2.value.props.auth.authenticated);

In the browser's console I get:

page    Proxy   undefined   undefined // not what I want; can't access my props!
page2   Object  false                 // correct answer

However, the library @inertiajs/vue3 is supposed to replace the deprecated @inertiajs/inertia-vue3, isn't it?

So why am I able to access the page props in page2 but not in page?
Moreover, why do I have to wrap the second option in a ref()? If I remove the ref() around usePage2()it fails with an undefined value again; and when wrapping the first solution with a ref like this ref(usePage()), it doesn't fix the problem either!

The documentation is a bit lacking on exactly how usePage() works in the composition API. And even my AI can't figure out what's going on. I'd like to use the non-deprecated version if possible!!

P.S. It shouldn't make any difference, but my authenticaed prop should return false (until the user logs in). The props are passed in via the HandleInertiaRequests{} PHP class.

public function share(Request $request): array
    return array_merge (parent::share($request), [
        'auth' => [
            'authenticated' => Auth::check(), // plus some other props
        ],
    ]);
}

cartbeforehorse · Accepted Answer · 2025-05-21 11:33:48Z

1

cmd> npm uThe problem appears to be that I'm defining my application in app.js incorrectly.

import { createInertiaApp, Link, Head } from '@inertiajs/inertia-vue3';

This should be:

import { createInertiaApp, Link, Head } from '@inertiajs/vue3';

There fore there was a conflict between the versions of the IneretiaApp and the call to usePage(), hence why I could (sort of) get it to work with the @inertiajs/inertia-vue3 library.

I shouldn't be mixing and matching libraries!!

By changing the definition of the Inertia Application, I can now get this to work:

import { usePage }         from '@inertiajs/vue3';
const page = usePage();
console.log('the page is', page.props.auth.authenticated); // prints: false

There's no need for .value to be added anywhere!!

Probably safer not to have both libraries installed in the first place!!

cmd> npm remove @inertiajs/inertia-vue3

edited May 21 at 11:33

answered May 21 at 11:11

cartbeforehorse

3,6252 gold badges41 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problems with `usePage()` in Inertia + Vue3 when using inertiajs/vue3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related