Script Event Page

Background

Analytics scripts often send an event after each route change. Nuxt's page:finish hook runs after the page's Suspense tree resolves, but a queued head update may still be pending.

useScriptEventPage() listens for page:finish, then waits for Unhead to render the DOM (or for a 100 ms fallback) before reading document.title and the route's full path. Its callback runs only in the browser.

If you register the composable before Nuxt emits the initial page:finish, the first callback covers the initial render. Registering it later tracks only subsequent navigations.

Usage

Pass a callback and send the resolved values to your analytics provider:

const { proxy } = useScriptGoogleAnalytics()

useScriptEventPage(({ title, path }) => {
  // Triggered after the initial render and each route change
  proxy.gtag('event', 'page_view', {
    page_title: title,
    page_location: window.location.href,
    page_path: path,
  })
})