How to access this.$page in Vue 3 composition API

[sadhakbj]

I am new to Inertia js, i am following the official documentation and PINGCRM's code to learn it. I want to make use of Vue 3 Composition API. In my Layout.vue file, i have the following code to check if the url is active:

export default defineComponent({
    name: "navbar",
    setup() {
        const isUrl = (...urls) => {
            return urls.filter((url) => this.$page.url.match(url)).length
        }
        return { isUrl }
    },
})

While trying to do so i am getting the following error:
app.js:22025 Uncaught (in promise) TypeError: Cannot read property '$page' of undefined

I looked in the official documentation but was unable to find the solution for this.

[reinink]

Use the usePage hook. For example:

<script>
  import { computed } from 'vue'
  import { usePage } from '@inertiajs/inertia-vue3'

  export default {
    setup() {
      const url = usePage().url
    },
  }
</script>

[mreduar]

Hi @ajnsn, thanks for your reply.
I am using the Vue Dev Tools in Chrome, and the user property is present here.

But when I use usePage().props it is not. It tells me undefined

That's why I thought that usePage() is not the same as $page.

[saas786]

.value

You missed the value part should be like usePage().props.value.user

[mreduar]

Ohhhh, I thought it was just one example, I didn't think I actually had to access .value. Indeed there if this property. Thank you very much @saas786 and @ajnsn

[ajnsn]

Hey @mreduar
This should work:

console.log('pageProps', pageProps.value.user);

The reason behind the .value is that the props are an computed() property, see source over here.

Vue 3 always returns a reactive object that has an "inner value".
And here are some more insights from the Vue docs.

Note: When using in a <template>, you can stick to pageProps.user as Vue will automatically unwrap the value for you.

[mreduar]

@ajnsn Great! Thanks for these documentations 👏👏👏 I still have to learn the new things vue 3