Ziggyjs route not updating in Laravel + Vue + InertiaJs

I have a Component that has a render function. And I just can't make this to work, unless I hard reload the page.

import { useSlots, h } from "vue";

const slots = useSlots();
const children = slots.collapseChild();

const renderFunc = () => {
	return children.map(child => {
		return h("li", {
          /*this one --->*/ active: child.props?.href == route(route().current())
        },child);
	})
}


<template>
  <ul>
    <renderFunc />
  </ul>
</template>

It seems like it renders the element and does not update the route(route().current()) when navigated to other page. I could maybe share the current url from HandleInertiaRequests.php to front-end, but I don't know. That could may be the last resort.

vincent15000

1 month ago

Level 63

What are you trying to do ?

Shivamyadav

1 month ago

Level 20

Try this as the route ziggy package does not provide the reactive data on page navigation. You need to use the vue's reactivity with the route of the ziggy like this :

<script setup>
import { useSlots, h, computed } from 'vue'
import { usePage } from '@inertiajs/vue3'

const slots = useSlots()
const page = usePage()

// reactive current URL
const currentUrl = computed(() => page.url)

const renderFunc = () => {
  const children = slots.collapseChild?.() || []

  return children.map(child => {
    return h(
      "li",
      {
        class: {
          active: child.props?.href === currentUrl.value
        }
      },
      child
    )
  })
}
</script>

<template>
  <ul>
    <component :is="renderFunc" />
  </ul>
</template>

1 like

vincent15000

4 weeks ago

Level 63

Once the component is loaded, the current route is not updated.

The best way to get the current route is to send it from the Inertia middleware.

public function share(Request $request): array
{
    return [
        ...parent::share($request),
        'currentRouteName' => fn () => request()->route()->getName(),
        'auth' => [
            'user' => auth()->user() ?? null,
        ],
    ];
}

And you can access the currentRouteName via the props in your VueJS component.

{{ page.props.currentRouteName }}

https://inertiajs.com/docs/v3/data-props/shared-data#accessing-shared-data

Please or to participate in this conversation.