diff --git a/packages/nuxt/src/pages/runtime/page.ts b/packages/nuxt/src/pages/runtime/page.ts
index 5ba304cd23..f9284173a2 100644
--- a/packages/nuxt/src/pages/runtime/page.ts
+++ b/packages/nuxt/src/pages/runtime/page.ts
@@ -41,7 +41,6 @@ export default defineComponent({
const nuxtApp = useNuxtApp()
const pageRef = ref()
const forkRoute = inject(PageRouteSymbol, null)
- let previousPageKey: string | undefined | false
expose({ pageRef })
@@ -97,10 +96,6 @@ export default defineComponent({
}
const key = generateRouteKey(routeProps, props.pageKey)
- if (!nuxtApp.isHydrating && !hasChildrenRoutes(forkRoute, routeProps.route, routeProps.Component) && previousPageKey === key) {
- nuxtApp.callHook('page:loading:end')
- }
- previousPageKey = key
const hasTransition = !!(props.transition ?? routeProps.route.meta.pageTransition ?? defaultPageTransition)
const transitionProps = hasTransition && _mergeTransitionProps([
@@ -161,10 +156,3 @@ function haveParentRoutesRendered (fork: RouteLocationNormalizedLoaded | null, n
(c, i) => c.components?.default !== fork.matched[i]?.components?.default) ||
(Component && generateRouteKey({ route: newRoute, Component }) !== generateRouteKey({ route: fork, Component }))
}
-
-function hasChildrenRoutes (fork: RouteLocationNormalizedLoaded | null, newRoute: RouteLocationNormalizedLoaded, Component?: VNode) {
- if (!fork) { return false }
-
- const index = newRoute.matched.findIndex(m => m.components?.default === Component?.type)
- return index < newRoute.matched.length - 1
-}
diff --git a/test/basic.test.ts b/test/basic.test.ts
index d4039d31cd..e3102842ab 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -625,6 +625,44 @@ describe('pages', () => {
const html = await $fetch('/prerender/test')
expect(html).toContain('should be prerendered: true')
})
+
+ it('should trigger page:loading:end only once', async () => {
+ const { page, consoleLogs } = await renderPage('/')
+
+ await page.getByText('to page load hook').click()
+ await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, '/page-load-hook')
+ const loadingEndLogs = consoleLogs.filter(c => c.text.includes('page:loading:end'))
+ expect(loadingEndLogs.length).toBe(1)
+
+ await page.close()
+ })
+
+ it('should hide nuxt page load indicator after navigate back from nested page', async () => {
+ const LOAD_INDICATOR_SELECTOR = '.nuxt-loading-indicator'
+ const { page } = await renderPage('/')
+ await page.getByText('to page nuxt load indicator').click()
+ await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, '/nested/xyz')
+
+ await page.waitForSelector(LOAD_INDICATOR_SELECTOR)
+ let isVisible = await page.isVisible(LOAD_INDICATOR_SELECTOR)
+ expect(isVisible).toBe(true)
+
+ await page.waitForSelector(LOAD_INDICATOR_SELECTOR, { state: 'hidden' })
+ isVisible = await page.isVisible(LOAD_INDICATOR_SELECTOR)
+ expect(isVisible).toBe(false)
+
+ await page.goBack()
+
+ await page.waitForSelector(LOAD_INDICATOR_SELECTOR)
+ isVisible = await page.isVisible(LOAD_INDICATOR_SELECTOR)
+ expect(isVisible).toBe(true)
+
+ await page.waitForSelector(LOAD_INDICATOR_SELECTOR, { state: 'hidden' })
+ isVisible = await page.isVisible(LOAD_INDICATOR_SELECTOR)
+ expect(isVisible).toBe(false)
+
+ await page.close()
+ })
})
describe('nuxt composables', () => {
diff --git a/test/fixtures/basic/pages/index.vue b/test/fixtures/basic/pages/index.vue
index d0fcd1513c..45edab2b72 100644
--- a/test/fixtures/basic/pages/index.vue
+++ b/test/fixtures/basic/pages/index.vue
@@ -3,6 +3,7 @@
Basic fixture
+
Hello Nuxt 3!
RuntimeConfig | testConfig: {{ config.public.testConfig }}
Composable | foo: {{ foo }}
@@ -94,6 +95,12 @@
to server page
+
+ to page load hook
+
+
+ to page nuxt load indicator
+
diff --git a/test/fixtures/basic/pages/page-load-hook.vue b/test/fixtures/basic/pages/page-load-hook.vue
new file mode 100644
index 0000000000..49b858b0b8
--- /dev/null
+++ b/test/fixtures/basic/pages/page-load-hook.vue
@@ -0,0 +1,5 @@
+
+
+ Page for hook tests.
+
+
diff --git a/test/fixtures/basic/plugins/page-hook-plugin.ts b/test/fixtures/basic/plugins/page-hook-plugin.ts
new file mode 100644
index 0000000000..880f7f1ac4
--- /dev/null
+++ b/test/fixtures/basic/plugins/page-hook-plugin.ts
@@ -0,0 +1,8 @@
+export default defineNuxtPlugin((nuxtApp) => {
+ const route = useRoute()
+ nuxtApp.hook('page:loading:end', () => {
+ if (route.path === '/page-load-hook') {
+ console.log('page:loading:end')
+ }
+ })
+})