Reload particular page when navigated to from within the SPA

I'm using an embedded widget from a 3rd party on a particular page. The site is using Laravel 10, Vue 3, and Inertia 1.

The widget is using an external script, and to save that script being used on every page I've added it to the one page it'll get used on.

My issue is if this page (URL would be /book-a-table) is navigated to any other page within the site, the external script isn't loaded. If on the page and I hit refresh then the script is loaded. My guess is the app is reloaded and the request is fresh with the external script call included. Visiting the page from any other site also loads the script.

At a guess I'd need some watcher of some sort to check for any page navigating to /book-a-table and fire a page reload?

rajeshtva

2 years ago

Level 4

@thetechnician how are you adding that code? could you share code snippet. you said you are using Vue3. i think you should load that plugin inside your onMounted() hook. if your script depends on complete loading of DOM tree. then you should combine that with nextTick(). that way i think your problem wil be solved.

theTechnician

2 years ago

Level 2

@rajeshtva I've got the following in onMounted:

let widget = document.createElement('script');
widget .setAttribute('src', 'https://externalurl.com/WidgetLoader.js');
document.head.appendChild(widget );

I've also tried that in setup too, but still the outcome.

In the body of this page (for this widget to work) is a <div> and a <input> that the 3rd party have provided.

gych

2 years ago

Level 29

@theTechnician Like @rajeshtva also already mentioned try to use onMounted combined with nextTick()

Here is an example for vue3 composition api

onMounted(() => {
		const widget = document.createElement('script');
		widget.setAttribute('src', 'https://externalurl.com/WidgetLoader.js');

		await nextTick();

		document.head.appendChild(widget);
});

theTechnician

2 years ago

Level 2

@gych @rajeshtva I've tried the suggest and get an error with the await nextTick() line:

[plugin:vite:vue] [vue/compiler-sfc] Unexpected reserved word 'await'. (26:4)

Tried moving the await nextTick() to another function, but then the script doesn't load with the page refresh as before.

let externalscript= document.createElement('script');
onMounted(() => {
    externalscript.setAttribute('src', 'https://externalurl.com/WidgetLoader.js');

    something();
})

async function something() {
    await nextTick();

    document.head.appendChild(externalscript);
}

gych

2 years ago

Level 29

Try like this

const loadWidget = async () => {
	let externalscript = document.createElement('script');
	externalscript.setAttribute('src', 'https://externalurl.com/WidgetLoader.js');

	await nextTick();

	 document.head.appendChild(externalscript);
};

onMounted(() => {
	loadWidget();
});

Please or to participate in this conversation.