Update URL instead of query string

I am trying to convert a Vue app (Nuxt actually) to LiveWire.

The experience has been awesome so far, but I’m struggeling with the following: how can I update the URL inside a component?

I’m building a ticketing platform and our url’s currenly look like this:

/{organiser-slug}/{event-slug}/{action?}.

This means that if a user goes to https://domain.com/organiser1/event1 they will see the event detail page.

However, when you go to https://domain.com/organiser1/event1/tickets, you will see the same event detail page, but now the tickets popup is opened.

The checkout page is shown on https://domain.com/organiser1/event1/checkout etc.

Is there a way to achieve this with LiveWire? Sure, I can just manually link to it, but that means I would love state etc. Would be awesome if I could do it from inside the component.

For a live demo of the existing app, see https://boxoffice.computicket.com/events/15d30cbb-9492-40b9-b09d-a1e33ef720c5

2 Likes