vue3 usePage state not updating on props changing

[nurdism]

Version:

• @inertiajs/vue3 version: 1.0.0

Describe the problem:

when using usePage() it does not return a ref and there for does not update correctly when the page changes

because usePage is returning page.value and not the ref once you reassign page.value the old value will not get updated.

Example:

use Inertia\Inertia;

Route::get('/test', function () {
  return Inertia::render('Test', [
    'time' => time(),
  ]);
});

<script setup>
  const page = usePage()
  const time = computed(() => page.props.time)
  const newTime = ref(0)

  let timeout
  function reload() {
    timeout = setTimeout(() => {
      console.log(page.props) // { time: "1675567188" }
      console.log(time.value) // "1675567188"

      const page2 = usePage() // call it again now that the props have changed
      console.log(page2.props) // shows true value

      newTime.value = page2.props.time // update newTime ref to show new time

      router.reload()
      clearTimeout(timeout)
      reload()
    }, 5000)
  }

  onMounted(() => {
    reload()
  })
</script>

<template>{{ time }} : {{ newTime }}</template>

this would be solved by returning the ref not the value, but would be a breaking change due to you needing to access page values via page.value I forgot about reactive objects

[nurdism]

Someone on discord pointed out, while true usePage() does return the current page meta, it is unusual pattern for vue 3 composable functions. Composable functions typically return some form of reactive object (or function) to be used. There's a lot of good info on reactive objects here.

Having to use something like this:

const time = computed(() => usePage().props.time)

vs

const page = usePage() // reactive object
const time = computed(() =>page.props.time)

the page ref could be made into a reactive object rather then a ref and updates would be reactive without having to use page.value

[nurdism]

I have written and example on how this might be used, this may just work but I don't have an env set up to test using these changes https://gist.github.com/nurdism/cd162c5413de7f38d939ff4cba308b4e this assumes that page object always has component, props, url, version, scrollRegions, rememberedState & resolvedErrors keys, it reassigns each with Object.assign(page, args.page) you could also assign it like Object.assign(page, { component: '', props: null, (etc), ...args.page }) and this will add all the necessary default values and update the full object

[mathieutu]

Linked to discussion in this PR.

The usePage implementation is indeed problematic. It needs to be directly used in a computed for each usage.

[mathieutu]

I've submitted a fix.

[reinink]

Hey folks, these issues have been fixed (see #1469), and have been released in v1.0.4. Thanks for all your input/help! 🙏