In Vue 3, how to get $page.props value in setup() ?

[sarukomine]

Hi, I am new, I have read the doc (https://inertiajs.com/shared-data), but it only teaching how use $page.props in <template>, I dont know how to get it in setup()??

I tried below but not working. It says $page is not defined

export default {
    setup() {
        const user = $page.props.user
    }
}

[reinink]

Yeah, we need to add the usePage() hook to the docs still. Here's how to do this:

<template>
  <div>Logged in as: {{ user.name }}</div>
</template>

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

export default {
  setup() {
    const user = computed(() => usePage().props.value.user)
    return { user }
  },
}
</script>

[RobertBoes]

Just following up with a few question on this
Vue 3 also supports injecting and providing objects, also proposed in #435, what's the benefit of choosing this method hook/callback over injection?
I'm using the following, since it seems more "the Vue way", but does that have any drawbacks I'm not aware of?

// app.js
import { provide } from 'vue'

createApp({
  // render InertiaApp
})
.provide('$page', usePage())

// MyComponent.vue
import { inject } from 'vue'

setup() {
  const user = inject('$page').props.value.user;
}

[sarukomine]

@reinink it work for me! thanks u so much!

[reinink]

My pleasure, I've also updated the website to include a usePage() example: https://inertiajs.com/shared-data#accessing-shared-data