Merge 23b1af766b into 9bf8465806

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

docs/1.getting-started/2.installation.md

@@ -21,8 +21,8 @@ Or follow the steps below to set up a new Nuxt project on your computer.
 <!-- markdownlint-disable-next-line MD001 -->
 #### Prerequisites
 
-- **Node.js** - [`v18.0.0`](https://nodejs.org/en) or newer
-- **Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com/) with the [official Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously known as Volar)
+- **Node.js** - [`18.x`](https://nodejs.org/en) or newer (but we recommend the [active LTS release](https://github.com/nodejs/release#release-schedule))
+- **Text editor** - There is no IDE requirement, but we recommend [Visual Studio Code](https://code.visualstudio.com/) with the [official Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously known as Volar) or [WebStorm](https://www.jetbrains.com/webstorm/), which, along with [other JetBrains IDEs](https://www.jetbrains.com/ides/), offers great Nuxt support right out-of-the-box.
 - **Terminal** - In order to run Nuxt commands
 
 ::note

eslint.config.mjs

@@ -189,7 +189,6 @@ export default createConfigForNuxt({
       },
     },
     // Sort rule keys in eslint config
-    // @ts-expect-error incorrect types 🤔
     {
       files: ['**/eslint.config.mjs'],
       name: 'local/sort-eslint-config',

package.json

@@ -40,7 +40,7 @@
     "@nuxt/ui-templates": "workspace:*",
     "@nuxt/vite-builder": "workspace:*",
     "@nuxt/webpack-builder": "workspace:*",
-    "@types/node": "22.9.0",
+    "@types/node": "22.9.1",
     "@unhead/dom": "1.11.11",
     "@unhead/shared": "1.11.11",
     "@unhead/vue": "1.11.11",
@@ -75,7 +75,7 @@
     "@nuxt/webpack-builder": "workspace:*",
     "@testing-library/vue": "8.1.0",
     "@types/eslint__js": "8.42.3",
-    "@types/node": "22.9.0",
+    "@types/node": "22.9.1",
     "@types/semver": "7.5.8",
     "@unhead/schema": "1.11.11",
     "@unhead/vue": "1.11.11",
@@ -91,7 +91,7 @@
     "devalue": "5.1.1",
     "eslint": "9.15.0",
     "eslint-plugin-no-only-tests": "3.3.0",
-    "eslint-plugin-perfectionist": "3.9.1",
+    "eslint-plugin-perfectionist": "4.0.2",
     "eslint-typegen": "0.3.2",
     "h3": "npm:h3-nightly@2.0.0-1718872656.6765a6e",
     "happy-dom": "15.11.6",

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
-}

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', () => {

test/fixtures/basic/pages/index.vue

@@ -3,6 +3,7 @@
     <Head>
       <Title>Basic fixture</Title>
     </Head>
+    <NuxtLoadingIndicator :throttle="0" />
     <h1>Hello Nuxt 3!</h1>
     <div>RuntimeConfig | testConfig: {{ config.public.testConfig }}</div>
     <div>Composable | foo: {{ foo }}</div>
@@ -94,6 +95,12 @@
     <NuxtLink to="/server-page">
       to server page
     </NuxtLink>
+    <NuxtLink to="/page-load-hook">
+      to page load hook
+    </NuxtLink>
+    <NuxtLink to="/nested/xyz">
+      to page nuxt load indicator
+    </NuxtLink>
   </div>
 </template>
 

test/fixtures/basic/pages/page-load-hook.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Page for hook tests.
+  </div>
+</template>

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')
+    }
+  })
+})