Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Nevda's avatar
Level 1

How to get $page.props items inside a Vue JS function?

Hi everyone,

I am working on my first single page application using Inertia + Laravel.

So in my Laravel function I create new data and it goes successful, then at the end of function I use the way you see down below to return a response:

return redirect()->back()->with('status', ['message' => 'New reminder successfully created.', 'account' => new AccountsNormalResource($account)]);

Now I see this status response is available under attrs when I check Vue Dev Tool. I know I can catch it in template like this: {{ $page.props.status }}

But my question is how can I catch status from $page.props inside a function?

In this example down below I want to catch the new account info and push it immediately to previous array but I don't know how to get status.

If anybody here can help me, please comment below. Thank you

<template>
<div class="container">
{{ $page.props.status }}
</div>
</template>
<script setup>

const pushNewAccount = account => {
store.dispatch('accountsList', [account.data])
}

const NewReminder = () => {
        Inertia.post(route('accounts.create'), data.newForm, {
                onStart: () => {
                    data.progress = true
                    data.success = false
                },
                onFinish: () => (data.progress = false),
                onSuccess: () => {
                    addNewReminder(response_from_laravel) //I don't know how to get status from laravel response!
                    data.newForm.reset()
                }
        })
}
</script>
0 likes
6 replies
undeportedmexican's avatar
Level 15

In my opinion you're over complicating your solution.

I don't like answering with "why don't you instead do..." LOL ... but in this case I think you can greatly benefit from it.

You can use Inertia form helper to submit requests to your server (https://inertiajs.com/forms#form-helper).

With the helper you get access to progress, wasSuccessful , and a whole myriad of things.

So you can do something like:

const newAccountForm = useForm({
		//Whatever props you need.
})

and then you simply need to submit such form, using the form helper post method. The first argument is the URL and the second one is the options for the request, where you can handle success and errors:

newAccountForm.post(route('accounts.create'), {
		onSuccess: () => alert('Account created successfully'),
		onError: () => alert('Something went wrong')
})

Additionally, the form object already comes with an errors property, which will contain any validation errors you send back from the server.

You can also use newAccountForm.processing to know if the form is being processed, and newAccountForm.progress to get back the progress of the form. And newAccountForm.wasSuccessful to know the form was submitted properly.

Nevda's avatar
Level 1

@undeportedmexican Thanks for your help however it wasn't right to the point but it kind of helped me to get my answer.

luisgal93's avatar

Hello, this works for me :)

const {...variableName} = computed(() => usePage().props.value.propName.otherProperty).value;

Example:

const {...userInfo} = computed(() => usePage().props.value.auth.user).value;
console.log(userInfo.name); // Show my user name

Good luck!

2 likes
seanmccabe's avatar

@luisgal93 attempted to use this and just get the error "usePage is not defined".

If I do

import { UseForm } from "@inertiajs/inertia";

I get usePage is not a function.

How do you use this correctly?

Xavlay's avatar

@seanmccabe I had same problem on my project, i needed to use import { useForm, usePage } from "@inertiajs/inertia-vue3" in order to get both functions usePage and useForm running properly.

1 like
gregupton's avatar

You need to import it.

import { usePage } from '@inertiajs/vue3';
1 like

Please or to participate in this conversation.