Layout and Page Lifecycle: In What Order Do Hooks Run?

When does each hook run?

Vue and Nuxt’s reactivity makes apps feel intuitive, but lifecycles can be tricky.
When navigating between pages, which hook runs when? When does the layout mount? Where does useAsyncData kick in?

The Core Idea

1. Layout → The skeleton (e.g., navbar, footer).
2. Page → Route-specific content.
3. Component → Child components used by the page.

Initial Page Load (SSR Phase)

1. Server-side setup → useAsyncData, useFetch kick off.
2. Server render → HTML is produced and sent.
3. Hydration → The client boots the Vue app.
4. onBeforeMount → Right before nodes attach to the DOM.
5. onMounted → The DOM is ready—do browser-only work.

Route Change Flow (CSR Phase)

1. onBeforeRouteLeave (old page) → Runs before leaving. Use for cleanup or guards.
2. onBeforeRouteUpdate (layout/page) → Fires when route params change under the same layout.
3. Page setup() → The new page’s setup runs; call useAsyncData here.
4. onBeforeMount (new page) → Before mounting to the DOM.
5. onMounted (new page) → After visual render.
6. onUpdated (page/component) → After reactive updates change the DOM.

Layout vs Page Hook Hierarchy

Example Flow: Blog List → Blog Detail

1. The layout (default.vue) stays; only the page updates.
2. onBeforeRouteUpdate triggers at both layout and page levels.
3. Page setup runs again (useAsyncData refetches).
4. onMounted fires when new content is in the DOM.

Using onBeforeRouteLeave and onBeforeRouteUpdate

onBeforeRouteLeave((to, from) => {
  if (formChanged.value) {
    const confirmLeave = confirm('Unsaved changes. Leave anyway?')
    if (!confirmLeave) return false
  }
})

onBeforeRouteUpdate((to) => {
  fetchPost(to.params.id)
})

Pro Tip: Global Hook Management

onBeforeRouteUpdate(() => startLoading())
onBeforeRouteLeave(() => stopLoading())

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:start', () => console.log('Loading new page...'))
  nuxtApp.hook('page:finish', () => console.log('Page loaded!'))
})

Lifecycle Order — Quick Summary

SSR phase: setup() → render → hydration
CSR phase: onBeforeRouteLeave → setup() → onMounted → onUpdated → onUnmounted

Common Pitfalls

1. Calling useAsyncData inside onMounted → misses SSR data.
2. Fetching with useRoute params only in onMounted → won’t update on param changes.
3. Assuming the layout is implicitly keep-alive → it can remount; state may reset.
4. Forgetting to reset reactive state on route change → stale data leaks into new pages.

Conclusion

In short:

• SSR → setup & useAsyncData
• CSR → onBeforeRouteUpdate & onMounted
• Layout → remounts only when it changes