Dealing with cached visits with Inertia

some-page.vue

<script setup lang="ts">
import { useBackForward } from '@/scripts/use-back-forward'

const { reloadOnBackForward } = useBackForward()

// When the page component is loaded, if it's a visit made with the "back" or "forward"
// browser functionality, the page will reload. You can optionally pass options to Inertia.
reloadOnBackForward({
	only: ['quotations'],
})
</script>

<template>
</template>

use-cache-forward.ts

import { Inertia } from '@inertiajs/inertia'

export function useBackForward() {
	/**
	 * Applies the given callback on back-forward visits.
	 */
	function onBackForward(fn: () => void) {
		const isBackForwardVisit = (window.performance?.getEntriesByType('navigation').at(0) as PerformanceNavigationTiming)?.type === 'back_forward'

		if (!isBackForwardVisit) {
			return
		}

		return fn()
	}

	/**
	 * Reloads the page on back-forward visits.
	 */
	function reloadOnBackForward(options?: Parameters<typeof Inertia.reload>[0]) {
		onBackForward(() => Inertia.reload(options))
	}

	return {
		onBackForward,
		reloadOnBackForward,
	}
}