Watch URL

Hi, I'm struggling to make my navbar a little smart. I have two types of headers on the site, first is on the homepage with a background image and second is just a plain white background. On the homepage where the background image is do I need the text to be white but for the other sites I need the text to be black. How can I know where the component is to have some kind of If statement. I have tried to create a computed attribute to look at the current URL but to make that work the customer needs to refresh the site to see the changes.

computed: {
	currentUrl() {
		return window.location.pathname
	}
}

I use my main layout to wrap the whole project and each component is rendered inside there. Which component depends on the site you are visiting. Something like this:

Main
	--> Nav
	--> Index (Homepage)

Main
	--> Nav
	--> About (About page)

hjortur17

3 years ago

Best Answer

Level 14

Was able to solve this using Inertia start eventListener

mounted() {
        Inertia.on("start", (event) => {
            this.currentUrl = event.detail.visit.url.pathname;
        });
    },

Please or to participate in this conversation.