From 454d612c7c44275c90091abbf7b203b9ef098a8c Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Thu, 21 May 2026 11:11:33 +0200
Subject: [PATCH 1/5] fix: pages 404

---
 pages/pages/[...slug].vue                     | 18 ++++++----------
 server/routes/nuxt-api/pages/[...slug].get.ts | 21 ++++++++++++++-----
 tests/pages/not-found.spec.ts                 | 21 +++++++++++++++++++
 3 files changed, 43 insertions(+), 17 deletions(-)
 create mode 100644 tests/pages/not-found.spec.ts

diff --git a/pages/pages/[...slug].vue b/pages/pages/[...slug].vue
index 5c7490b9b..3dd198525 100644
--- a/pages/pages/[...slug].vue
+++ b/pages/pages/[...slug].vue
@@ -16,10 +16,7 @@
       :status
       :data="data"
     >
-      <div
-        v-if="status === 'success' && data"
-        :class="markdownClasses"
-      >
+      <div :class="markdownClasses">
         <MarkdownViewer
           v-if="data.extension === 'md'"
           :content="data.content"
@@ -30,13 +27,6 @@
           v-else
         />
       </div>
-      <div
-        v-else
-        class="py-9 prose"
-      >
-        <h1>{{ $t('Erreur 404') }}</h1>
-        <p>{{ $t("La page que vous recherchez est introuvable.") }}</p>
-      </div>
     </LoadingBlock>
   </div>
 </template>
@@ -49,7 +39,7 @@ import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 const route = useRoute()
 const siteConfig = useSiteConfig()
 
-const { data, status } = useFetch<{
+const { data, status, error } = await useFetch<{
   data: {
     title: string
     description?: string
@@ -58,6 +48,10 @@ const { data, status } = useFetch<{
   content: string
 }>(`/nuxt-api/pages/${route.params.slug ? (route.params.slug as string[]).join('/') : ''}`)
 
+if (error.value || !data.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page Not Found', fatal: true })
+}
+
 const title = computed(() => data.value?.data.title)
 const description = computed(() => data.value?.data.description)
 
diff --git a/server/routes/nuxt-api/pages/[...slug].get.ts b/server/routes/nuxt-api/pages/[...slug].get.ts
index 02c4ff1c9..a29c28751 100644
--- a/server/routes/nuxt-api/pages/[...slug].get.ts
+++ b/server/routes/nuxt-api/pages/[...slug].get.ts
@@ -1,5 +1,5 @@
 import matter from 'gray-matter'
-import { ofetch } from 'ofetch'
+import { FetchError, ofetch } from 'ofetch'
 
 /**
  * Get the datagouv page based on the path
@@ -10,7 +10,7 @@ export default cachedEventHandler(async (event) => {
   const config = useRuntimeConfig()
   const repo = config.pagesGhRepoName
   if (!slug || !repo)
-    return new Response(null, { status: 404 })
+    throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
   const branch = config.pagesGhRepoBranch
   let rawUrl = `https://raw.githubusercontent.com/${repo}/${branch}/pages/${slug}`
   let ghUrl = `https://github.com/${repo}/blob/${branch}/pages/${slug}`
@@ -31,9 +31,20 @@ export default cachedEventHandler(async (event) => {
   rawUrl = `${rawUrl}.${extension}`
   ghUrl = `${ghUrl}.${extension}`
 
-  const response = await ofetch<string>(rawUrl, {
-    timeout: 5000,
-  })
+  let response: string
+  try {
+    response = await ofetch<string>(rawUrl, {
+      timeout: 5000,
+    })
+  }
+  catch (error) {
+    // GitHub returns a 404 when the page does not exist: return a clean 404
+    // instead of letting the error bubble up as a 500.
+    if (error instanceof FetchError && error.statusCode === 404) {
+      throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
+    }
+    throw error
+  }
   const content = matter(response)
   return {
     ghUrl,
diff --git a/tests/pages/not-found.spec.ts b/tests/pages/not-found.spec.ts
new file mode 100644
index 000000000..1092346c5
--- /dev/null
+++ b/tests/pages/not-found.spec.ts
@@ -0,0 +1,21 @@
+import { test, expect } from '../base'
+
+// Non-existent slugs on /pages/ must return a clean HTTP 404 rendering the
+// shared error page, not a soft 404 (HTTP 200) nor a 500.
+// See https://github.com/datagouv/data.gouv.fr/issues/1932
+const notFoundCases = [
+  '/pages', // empty slug
+  '/pages/404', // example from the issue
+  '/pages/this-page-does-not-exist-1932', // arbitrary missing slug
+]
+
+test.describe('Pages not found', () => {
+  notFoundCases.forEach((url) => {
+    test(`${url} returns a clean 404`, async ({ page }) => {
+      const response = await page.goto(url)
+      expect(response?.status()).toBe(404)
+      await expect(page.getByRole('heading', { level: 1, name: '404' })).toBeVisible()
+      await expect(page.getByRole('heading', { name: 'Page non trouvée' })).toBeVisible()
+    })
+  })
+})

From 4f00e8ac23f30ff9a64158fcb743e7dda7242df1 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Thu, 21 May 2026 11:38:53 +0200
Subject: [PATCH 2/5] try to fix 404 redirects

---
 error.vue                        | 299 ++++++++++++++++---------------
 middleware/clear-error.global.ts |  16 ++
 pages/pages/[...slug].vue        |  10 +-
 tests/pages/not-found.spec.ts    |  15 ++
 4 files changed, 194 insertions(+), 146 deletions(-)
 create mode 100644 middleware/clear-error.global.ts

diff --git a/error.vue b/error.vue
index 39afd0580..4f292ce9d 100644
--- a/error.vue
+++ b/error.vue
@@ -1,160 +1,169 @@
 <template>
-  <NuxtLayout>
+  <div>
+    <!-- Teleport target for Toggletip (rendered by SiteHeader). app.vue
+         provides it, but app.vue isn't mounted on the error page, so we must
+         provide it here too, before NuxtLayout mounts the header. -->
     <div
-      v-if="error"
-      class="min-h-screen bg-white flex items-center justify-center px-8 md:px-4"
-    >
-      <div class="flex flex-col items-center text-center max-w-2xl w-full gap-6">
-        <div class="w-37 h-35 flex items-center justify-center md:w-25 md:h-24">
-          <img
-            v-if="statusCode === 404"
-            :src="error404Svg"
-            alt="Erreur 404"
-            class="w-full h-full object-contain"
-          >
-          <img
-            v-else-if="statusCode === 403"
-            :src="error403Svg"
-            alt="Erreur 403"
-            class="w-full h-full object-contain"
-          >
-          <img
-            v-else-if="statusCode === 410"
-            :src="error410Svg"
-            alt="Erreur 410"
-            class="w-full h-full object-contain"
-          >
-          <img
-            v-else-if="statusCode >= 500"
-            :src="error500Svg"
-            alt="Erreur serveur"
-            class="w-full h-full object-contain"
-          >
-          <img
-            v-else
-            :src="error500Svg"
-            alt="Erreur"
-            class="w-full h-full object-contain"
-          >
-        </div>
-
-        <h1 class="text-6xl font-extrabold leading-none text-gray-title m-0 md:text-5xl">
-          <template v-if="statusCode">
-            {{ statusCode }}
-          </template>
-          <template v-else>
-            {{ $t('Erreur') }}
-          </template>
-        </h1>
-
-        <h2 class="text-2xl font-extrabold leading-9 text-gray-title m-0 md:text-xl md:leading-8">
-          <template v-if="statusCode === 404">
-            {{ $t('Page non trouvée') }}
-          </template>
-          <template v-else-if="statusCode === 403">
-            {{ $t('Accès interdit') }}
-          </template>
-          <template v-else-if="statusCode === 410">
-            {{ $t('Contenu supprimé') }}
-          </template>
-          <template v-else-if="statusCode >= 500">
-            {{ $t('Erreur interne du serveur') }}
-          </template>
-          <template v-else>
-            {{ $t('Erreur inattendue') }}
-          </template>
-        </h2>
-
-        <p class="text-base font-normal leading-6 text-gray-title m-0 text-center md:text-sm md:leading-5">
-          <template v-if="statusCode === 404">
-            {{ $t("Désolé, nous n'avons pas trouvé la page que vous recherchez. Il se peut que le lien soit incorrect ou que la page ait été déplacée ou supprimée. Si cela vous semble une erreur n'hésitez pas à") }}
-            <NuxtLink
-              to="/support"
-              class="text-datagouv-dark"
+      id="tooltips"
+      class="datagouv-components h-0"
+    />
+    <NuxtLayout>
+      <div
+        v-if="error"
+        class="min-h-screen bg-white flex items-center justify-center px-8 md:px-4"
+      >
+        <div class="flex flex-col items-center text-center max-w-2xl w-full gap-6">
+          <div class="w-37 h-35 flex items-center justify-center md:w-25 md:h-24">
+            <img
+              v-if="statusCode === 404"
+              :src="error404Svg"
+              alt="Erreur 404"
+              class="w-full h-full object-contain"
             >
-              {{ $t('nous écrire') }}
-            </NuxtLink>.
-          </template>
-          <template v-else-if="statusCode === 403">
-            {{ $t("Vous n'avez pas la permission d'accéder à cette page. Cela peut être dû à des restrictions de droits ou à une authentification manquante. Si cela vous semble une erreur n'hésitez pas à") }}
-            <NuxtLink
-              to="/support"
-              class="text-datagouv-dark"
+            <img
+              v-else-if="statusCode === 403"
+              :src="error403Svg"
+              alt="Erreur 403"
+              class="w-full h-full object-contain"
             >
-              {{ $t('nous écrire') }}
-            </NuxtLink>.
-          </template>
-          <template v-else-if="statusCode === 410">
-            {{ $t("Ce contenu a été volontairement retiré. Il n'est plus accessible, car il a été supprimé définitivement par son producteur. Si cela vous semble une erreur n'hésitez pas à") }}
-            <NuxtLink
-              to="/support"
-              class="text-datagouv-dark"
+            <img
+              v-else-if="statusCode === 410"
+              :src="error410Svg"
+              alt="Erreur 410"
+              class="w-full h-full object-contain"
             >
-              {{ $t('nous écrire') }}
-            </NuxtLink>.
-          </template>
-          <template v-else-if="statusCode >= 500">
-            {{ $t("Une erreur interne est survenue. Veuillez nous excuser pour la gêne occasionnée. Si le problème persiste, merci de nous écrire avec les détails de l'erreur pour que nous puissions y remédier rapidement.") }}
-          </template>
-          <template v-else>
-            {{ $t("Une erreur inattendue s'est produite. Veuillez nous excuser pour la gêne occasionnée. Si le problème persiste, merci de") }}
-            <NuxtLink
-              to="/support"
-              class="text-datagouv-dark"
+            <img
+              v-else-if="statusCode >= 500"
+              :src="error500Svg"
+              alt="Erreur serveur"
+              class="w-full h-full object-contain"
             >
-              {{ $t('nous écrire') }}
-            </NuxtLink>
-            {{ $t("avec les détails de l'erreur pour que nous puissions y remédier rapidement.") }}
-            <span
-              v-if="errorMessage"
-              class="fr-mt-2w fr-text--sm fr-text--bold"
-            >{{ errorMessage }}</span>
-          </template>
-        </p>
-
-        <div
-          v-if="statusCode >= 500 && errorMessage"
-          class="fr-mt-4w fr-p-2w"
-        >
-          <p class="fr-text--sm">
-            <span class="fr-text--bold">{{ $t('Code erreur') }} :&nbsp;</span>
-            <span class="font-mono">{{ errorMessage }}</span>
-            <CopyButton
-              :label="$t('Copier le code erreur')"
-              :copied-label="$t('Code erreur copié !')"
-              :text="errorMessage || ''"
-              class="ml-2"
-            />
-            <pre
-              v-if="error.stack"
-              class="text-left"
+            <img
+              v-else
+              :src="error500Svg"
+              alt="Erreur"
+              class="w-full h-full object-contain"
             >
-              {{ error.stack }}
-            </pre>
+          </div>
+
+          <h1 class="text-6xl font-extrabold leading-none text-gray-title m-0 md:text-5xl">
+            <template v-if="statusCode">
+              {{ statusCode }}
+            </template>
+            <template v-else>
+              {{ $t('Erreur') }}
+            </template>
+          </h1>
+
+          <h2 class="text-2xl font-extrabold leading-9 text-gray-title m-0 md:text-xl md:leading-8">
+            <template v-if="statusCode === 404">
+              {{ $t('Page non trouvée') }}
+            </template>
+            <template v-else-if="statusCode === 403">
+              {{ $t('Accès interdit') }}
+            </template>
+            <template v-else-if="statusCode === 410">
+              {{ $t('Contenu supprimé') }}
+            </template>
+            <template v-else-if="statusCode >= 500">
+              {{ $t('Erreur interne du serveur') }}
+            </template>
+            <template v-else>
+              {{ $t('Erreur inattendue') }}
+            </template>
+          </h2>
+
+          <p class="text-base font-normal leading-6 text-gray-title m-0 text-center md:text-sm md:leading-5">
+            <template v-if="statusCode === 404">
+              {{ $t("Désolé, nous n'avons pas trouvé la page que vous recherchez. Il se peut que le lien soit incorrect ou que la page ait été déplacée ou supprimée. Si cela vous semble une erreur n'hésitez pas à") }}
+              <NuxtLink
+                to="/support"
+                class="text-datagouv-dark"
+              >
+                {{ $t('nous écrire') }}
+              </NuxtLink>.
+            </template>
+            <template v-else-if="statusCode === 403">
+              {{ $t("Vous n'avez pas la permission d'accéder à cette page. Cela peut être dû à des restrictions de droits ou à une authentification manquante. Si cela vous semble une erreur n'hésitez pas à") }}
+              <NuxtLink
+                to="/support"
+                class="text-datagouv-dark"
+              >
+                {{ $t('nous écrire') }}
+              </NuxtLink>.
+            </template>
+            <template v-else-if="statusCode === 410">
+              {{ $t("Ce contenu a été volontairement retiré. Il n'est plus accessible, car il a été supprimé définitivement par son producteur. Si cela vous semble une erreur n'hésitez pas à") }}
+              <NuxtLink
+                to="/support"
+                class="text-datagouv-dark"
+              >
+                {{ $t('nous écrire') }}
+              </NuxtLink>.
+            </template>
+            <template v-else-if="statusCode >= 500">
+              {{ $t("Une erreur interne est survenue. Veuillez nous excuser pour la gêne occasionnée. Si le problème persiste, merci de nous écrire avec les détails de l'erreur pour que nous puissions y remédier rapidement.") }}
+            </template>
+            <template v-else>
+              {{ $t("Une erreur inattendue s'est produite. Veuillez nous excuser pour la gêne occasionnée. Si le problème persiste, merci de") }}
+              <NuxtLink
+                to="/support"
+                class="text-datagouv-dark"
+              >
+                {{ $t('nous écrire') }}
+              </NuxtLink>
+              {{ $t("avec les détails de l'erreur pour que nous puissions y remédier rapidement.") }}
+              <span
+                v-if="errorMessage"
+                class="fr-mt-2w fr-text--sm fr-text--bold"
+              >{{ errorMessage }}</span>
+            </template>
           </p>
-        </div>
 
-        <div class="mt-0">
-          <BrandedButton
-            v-if="statusCode >= 500"
-            href="/support"
-            color="primary"
-            size="lg"
-          >
-            {{ $t("Nous écrire") }}
-          </BrandedButton>
-          <BrandedButton
-            v-else
-            href="/"
-            color="primary"
-            size="lg"
+          <div
+            v-if="statusCode >= 500 && errorMessage"
+            class="fr-mt-4w fr-p-2w"
           >
-            {{ $t("Retour à l'accueil") }}
-          </BrandedButton>
+            <p class="fr-text--sm">
+              <span class="fr-text--bold">{{ $t('Code erreur') }} :&nbsp;</span>
+              <span class="font-mono">{{ errorMessage }}</span>
+              <CopyButton
+                :label="$t('Copier le code erreur')"
+                :copied-label="$t('Code erreur copié !')"
+                :text="errorMessage || ''"
+                class="ml-2"
+              />
+              <pre
+                v-if="error.stack"
+                class="text-left"
+              >
+              {{ error.stack }}
+            </pre>
+            </p>
+          </div>
+
+          <div class="mt-0">
+            <BrandedButton
+              v-if="statusCode >= 500"
+              href="/support"
+              color="primary"
+              size="lg"
+            >
+              {{ $t("Nous écrire") }}
+            </BrandedButton>
+            <BrandedButton
+              v-else
+              href="/"
+              color="primary"
+              size="lg"
+            >
+              {{ $t("Retour à l'accueil") }}
+            </BrandedButton>
+          </div>
         </div>
       </div>
-    </div>
-  </NuxtLayout>
+    </NuxtLayout>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/middleware/clear-error.global.ts b/middleware/clear-error.global.ts
new file mode 100644
index 000000000..8e64a293c
--- /dev/null
+++ b/middleware/clear-error.global.ts
@@ -0,0 +1,16 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  // When error.vue is displayed, Nuxt keeps it mounted until the error state is
+  // cleared (it is NOT cleared automatically on navigation, see nuxt#22683).
+  // Following an in-app link (e.g. a SiteHeader link) then triggers an SPA
+  // navigation that crashes ("can't access property exposed") because the error
+  // tree is still mounted. Clearing the error on a real route change restores
+  // the normal app tree.
+  // Client-only: the error page is rendered fresh on each SSR request, so there
+  // is nothing to clear server-side. The `to !== from` guard keeps the error
+  // page rendered on initial load and reload.
+  if (import.meta.server) return
+  const error = useError()
+  if (error.value && to.fullPath !== from.fullPath) {
+    await clearError()
+  }
+})
diff --git a/pages/pages/[...slug].vue b/pages/pages/[...slug].vue
index 3dd198525..0d6923434 100644
--- a/pages/pages/[...slug].vue
+++ b/pages/pages/[...slug].vue
@@ -39,6 +39,14 @@ import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 const route = useRoute()
 const siteConfig = useSiteConfig()
 
+// An empty slug (/pages) is not a valid page: return a clean 404 right away.
+// Fetching it would build the URL `/nuxt-api/pages/` whose trailing slash gets
+// 308-redirected, which ofetch follows without raising an error.
+const slug = route.params.slug ? (route.params.slug as string[]).join('/') : ''
+if (!slug) {
+  throw createError({ statusCode: 404, statusMessage: 'Page Not Found', fatal: true })
+}
+
 const { data, status, error } = await useFetch<{
   data: {
     title: string
@@ -46,7 +54,7 @@ const { data, status, error } = await useFetch<{
   }
   extension: string
   content: string
-}>(`/nuxt-api/pages/${route.params.slug ? (route.params.slug as string[]).join('/') : ''}`)
+}>(`/nuxt-api/pages/${slug}`)
 
 if (error.value || !data.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page Not Found', fatal: true })
diff --git a/tests/pages/not-found.spec.ts b/tests/pages/not-found.spec.ts
index 1092346c5..0669291d0 100644
--- a/tests/pages/not-found.spec.ts
+++ b/tests/pages/not-found.spec.ts
@@ -18,4 +18,19 @@ test.describe('Pages not found', () => {
       await expect(page.getByRole('heading', { name: 'Page non trouvée' })).toBeVisible()
     })
   })
+
+  // Following an in-app link from the error page must clear the error state and
+  // navigate normally. Before the fix, the SPA navigation crashed and left a
+  // blank page (see nuxt#22683). assertNoConsoleErrors catches the crash.
+  test('navigating away from the error page does not crash', async ({ page }) => {
+    await page.goto('/pages/this-page-does-not-exist-1932')
+    await expect(page.getByRole('heading', { level: 1, name: '404' })).toBeVisible()
+
+    await page.getByRole('link', { name: 'Retour à l\'accueil' }).click()
+
+    await expect(page).toHaveURL('/')
+    await expect(page.getByRole('heading', { level: 1, name: '404' })).toBeHidden()
+    // The home page actually rendered (not a blank page).
+    await expect(page.locator('h1').first()).toBeVisible()
+  })
 })

From e19bd608a85bb5d6cf206846bd499f63b22ba057 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Thu, 21 May 2026 11:58:44 +0200
Subject: [PATCH 3/5] fix 404 navigation out

---
 middleware/clear-error.global.ts          | 29 +++++++++++++---------
 tests/pages/error-page-navigation.spec.ts | 30 +++++++++++++++++++++++
 tests/pages/not-found.spec.ts             | 15 ------------
 3 files changed, 48 insertions(+), 26 deletions(-)
 create mode 100644 tests/pages/error-page-navigation.spec.ts

diff --git a/middleware/clear-error.global.ts b/middleware/clear-error.global.ts
index 8e64a293c..fe190c7ff 100644
--- a/middleware/clear-error.global.ts
+++ b/middleware/clear-error.global.ts
@@ -1,16 +1,23 @@
-export default defineNuxtRouteMiddleware(async (to, from) => {
+export default defineNuxtRouteMiddleware((to, from) => {
   // When error.vue is displayed, Nuxt keeps it mounted until the error state is
   // cleared (it is NOT cleared automatically on navigation, see nuxt#22683).
-  // Following an in-app link (e.g. a SiteHeader link) then triggers an SPA
-  // navigation that crashes ("can't access property exposed") because the error
-  // tree is still mounted. Clearing the error on a real route change restores
-  // the normal app tree.
-  // Client-only: the error page is rendered fresh on each SSR request, so there
-  // is nothing to clear server-side. The `to !== from` guard keeps the error
-  // page rendered on initial load and reload.
+  // Following an in-app link then crashes/blanks the page because the error tree
+  // is still mounted.
+  // We must NOT clear synchronously here: doing so re-renders the *current*
+  // (errored) route before the navigation commits, which re-mounts the page and
+  // re-runs its failing useFetch (see nuxt#27410). Instead, defer the clear until
+  // the navigation has committed to `to`, so the error tree is gone and the
+  // target page renders cleanly.
+  // Client-only: the error page is rendered fresh on each SSR request. The
+  // `to !== from` guard, plus only registering when an error is already present,
+  // keeps the error page rendered on initial load and reload.
   if (import.meta.server) return
   const error = useError()
-  if (error.value && to.fullPath !== from.fullPath) {
-    await clearError()
-  }
+  if (!error.value || to.fullPath === from.fullPath) return
+
+  const router = useRouter()
+  const stop = router.afterEach(() => {
+    stop()
+    clearError()
+  })
 })
diff --git a/tests/pages/error-page-navigation.spec.ts b/tests/pages/error-page-navigation.spec.ts
new file mode 100644
index 000000000..9732252c3
--- /dev/null
+++ b/tests/pages/error-page-navigation.spec.ts
@@ -0,0 +1,30 @@
+import { test, expect } from '../base'
+
+// Following an in-app link from the error page must clear the error state and
+// navigate normally, without crashing or leaving a blank/404 page.
+// Two distinct code paths reach error.vue and must both work:
+//   - /pages         -> empty slug, error thrown synchronously in setup
+//   - /pages/<slug>  -> missing slug, error thrown after `await useFetch`
+// The second used to stay stuck on the 404 because clearing the error re-ran the
+// failing useFetch (see nuxt#27410). assertNoConsoleErrors also catches the
+// "can't access property exposed" crash (see nuxt#22683).
+const startUrls = [
+  '/pages', // empty slug (sync throw)
+  '/pages/this-page-does-not-exist-1932', // missing slug (throw after useFetch)
+]
+
+test.describe('Navigating away from the error page', () => {
+  startUrls.forEach((startUrl) => {
+    test(`from ${startUrl} reaches the target page`, async ({ page }) => {
+      await page.goto(startUrl)
+      await expect(page.getByRole('heading', { level: 1, name: '404' })).toBeVisible()
+
+      await page.getByRole('link', { name: 'Retour à l\'accueil' }).click()
+
+      await expect(page).toHaveURL('/')
+      await expect(page.getByRole('heading', { level: 1, name: '404' })).toBeHidden()
+      // The home page actually rendered (not a blank page).
+      await expect(page.locator('h1').first()).toBeVisible()
+    })
+  })
+})
diff --git a/tests/pages/not-found.spec.ts b/tests/pages/not-found.spec.ts
index 0669291d0..1092346c5 100644
--- a/tests/pages/not-found.spec.ts
+++ b/tests/pages/not-found.spec.ts
@@ -18,19 +18,4 @@ test.describe('Pages not found', () => {
       await expect(page.getByRole('heading', { name: 'Page non trouvée' })).toBeVisible()
     })
   })
-
-  // Following an in-app link from the error page must clear the error state and
-  // navigate normally. Before the fix, the SPA navigation crashed and left a
-  // blank page (see nuxt#22683). assertNoConsoleErrors catches the crash.
-  test('navigating away from the error page does not crash', async ({ page }) => {
-    await page.goto('/pages/this-page-does-not-exist-1932')
-    await expect(page.getByRole('heading', { level: 1, name: '404' })).toBeVisible()
-
-    await page.getByRole('link', { name: 'Retour à l\'accueil' }).click()
-
-    await expect(page).toHaveURL('/')
-    await expect(page.getByRole('heading', { level: 1, name: '404' })).toBeHidden()
-    // The home page actually rendered (not a blank page).
-    await expect(page.locator('h1').first()).toBeVisible()
-  })
 })

From 038cf96684782a95106b06827b3dc9c24722f276 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Mon, 1 Jun 2026 08:57:16 +0200
Subject: [PATCH 4/5] fix warnings on anonymous components

---
 pages/pages/[...slug].vue | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/pages/pages/[...slug].vue b/pages/pages/[...slug].vue
index 0d6923434..39bdcba41 100644
--- a/pages/pages/[...slug].vue
+++ b/pages/pages/[...slug].vue
@@ -39,13 +39,10 @@ import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 const route = useRoute()
 const siteConfig = useSiteConfig()
 
-// An empty slug (/pages) is not a valid page: return a clean 404 right away.
-// Fetching it would build the URL `/nuxt-api/pages/` whose trailing slash gets
-// 308-redirected, which ofetch follows without raising an error.
+// An empty slug (/pages) is not a valid page. Skip the fetch entirely: its URL
+// `/nuxt-api/pages/` has a trailing slash that gets 308-redirected, which ofetch
+// follows without raising an error.
 const slug = route.params.slug ? (route.params.slug as string[]).join('/') : ''
-if (!slug) {
-  throw createError({ statusCode: 404, statusMessage: 'Page Not Found', fatal: true })
-}
 
 const { data, status, error } = await useFetch<{
   data: {
@@ -54,10 +51,14 @@ const { data, status, error } = await useFetch<{
   }
   extension: string
   content: string
-}>(`/nuxt-api/pages/${slug}`)
+}>(() => `/nuxt-api/pages/${slug}`, { immediate: Boolean(slug) })
 
-if (error.value || !data.value) {
-  throw createError({ statusCode: 404, statusMessage: 'Page Not Found', fatal: true })
+if (!slug || error.value || !data.value) {
+  // Use `showError`, not `throw createError`: throwing here rejects the async
+  // setup, and during an in-app (SPA) navigation Vue then renders this page once
+  // with an empty setup context, logging "Invalid vnode type: undefined" for each
+  // child component. `showError` sets the error state without rejecting setup.
+  showError({ statusCode: 404, statusMessage: 'Page Not Found', fatal: true })
 }
 
 const title = computed(() => data.value?.data.title)

From 4b0d522acf9d5dee6521fcaa8034d69158afaebc Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Mon, 1 Jun 2026 09:11:19 +0200
Subject: [PATCH 5/5] fix datagouv components wrong config after 404

---
 app.vue                                       | 35 +--------------
 error.vue                                     | 24 +---------
 plugins/datagouv-components.ts                | 44 +++++++++++++++++++
 .../datagouv-config-after-error.spec.ts       | 36 +++++++++++++++
 4 files changed, 82 insertions(+), 57 deletions(-)
 create mode 100644 plugins/datagouv-components.ts
 create mode 100644 tests/datasets/datagouv-config-after-error.spec.ts

diff --git a/app.vue b/app.vue
index ebe44f841..538012255 100644
--- a/app.vue
+++ b/app.vue
@@ -19,46 +19,13 @@
 
 <script setup lang="ts">
 import 'vue-sonner/style.css'
-import { Toaster, datagouv } from '@datagouv/components-next'
-import type { UseFetchFunction } from '@datagouv/components-next'
-import CdataLink from './components/CdataLink.vue'
-import { ClientOnly, TextClamp } from '#components'
-
-const app = useNuxtApp()
+import { Toaster } from '@datagouv/components-next'
 
 const { locale } = useTranslation()
 const runtimeConfig = useRuntimeConfig()
 const route = useRoute()
 const siteConfig = useSiteConfig()
 
-app.vueApp.use(datagouv, {
-  name: runtimeConfig.public.title,
-  baseUrl: siteConfig.url,
-  trustedDomains: runtimeConfig.public.trustedDomains,
-  apiBase: runtimeConfig.public.apiBase,
-  chartsApiBase: runtimeConfig.public.chartsApiBase,
-  devApiKey: runtimeConfig.public.devApiKey,
-  datasetQualityGuideUrl: runtimeConfig.public.datasetQualityGuideUrl,
-  maxJsonPreviewCharSize: runtimeConfig.public.maxJsonPreviewCharSize,
-  maxPdfPreviewByteSize: runtimeConfig.public.maxPdfPreviewByteSize,
-  maxXmlPreviewCharSize: runtimeConfig.public.maxXmlPreviewCharSize,
-  metricsApiUrl: runtimeConfig.public.metricsApi,
-  pmtilesViewerBaseUrl: null,
-  schemaValidataUrl: runtimeConfig.public.schemaValidataUrl,
-  schemaDocumentationUrl: runtimeConfig.public.schemasSite.url,
-  schemasSiteUrl: runtimeConfig.public.schemasSite.url,
-  schemasSiteName: runtimeConfig.public.schemasSite.name,
-  tabularApiUrl: runtimeConfig.public.tabularApiUrl,
-  tabularApiDataserviceId: runtimeConfig.public.tabularApiDataserviceId,
-  tabularAllowRemote: true,
-  customUseFetch: useAPI as UseFetchFunction, // Why this `as` is required?
-  textClamp: TextClamp,
-  appLink: CdataLink,
-  clientOnly: ClientOnly,
-  forumUrl: runtimeConfig.public.forumUrl,
-  searchDebounce: runtimeConfig.public.searchDebounce,
-})
-
 useHeadSafe({
   htmlAttrs: {
     lang: locale,
diff --git a/error.vue b/error.vue
index 4f292ce9d..f7f2d2621 100644
--- a/error.vue
+++ b/error.vue
@@ -167,10 +167,7 @@
 </template>
 
 <script setup lang="ts">
-import { datagouv, BrandedButton, CopyButton } from '@datagouv/components-next'
-import type { UseFetchFunction } from '@datagouv/components-next'
-import CdataLink from './components/CdataLink.vue'
-import { ClientOnly, TextClamp } from '#components'
+import { BrandedButton, CopyButton } from '@datagouv/components-next'
 import error404Svg from '~/public/nuxt_images/errors/404.svg'
 import error403Svg from '~/public/nuxt_images/errors/403.svg'
 import error410Svg from '~/public/nuxt_images/errors/410.svg'
@@ -178,31 +175,12 @@ import error500Svg from '~/public/nuxt_images/errors/500.svg'
 
 const error = useError()
 
-const app = useNuxtApp()
-
 const { locale } = useTranslation()
-const runtimeConfig = useRuntimeConfig()
-const siteConfig = useSiteConfig()
 
 // Computed properties to avoid repeating error checks
 const statusCode = computed(() => error.value?.statusCode as number)
 const errorMessage = computed(() => error.value?.message)
 
-app.vueApp.use(datagouv, {
-  name: runtimeConfig.public.title,
-  baseUrl: siteConfig.url,
-  apiBase: runtimeConfig.public.apiBase,
-  devApiKey: runtimeConfig.public.devApiKey,
-  tabularApiUrl: runtimeConfig.public.tabularApiUrl,
-  tabularApiDataserviceId: runtimeConfig.public.tabularApiDataserviceId,
-  tabularAllowRemote: true,
-  datasetQualityGuideUrl: runtimeConfig.public.datasetQualityGuideUrl,
-  customUseFetch: useAPI as UseFetchFunction, // Why this `as` is required?
-  textClamp: TextClamp,
-  appLink: CdataLink,
-  clientOnly: ClientOnly,
-})
-
 useHeadSafe({
   htmlAttrs: {
     lang: locale,
diff --git a/plugins/datagouv-components.ts b/plugins/datagouv-components.ts
new file mode 100644
index 000000000..b47bcd250
--- /dev/null
+++ b/plugins/datagouv-components.ts
@@ -0,0 +1,44 @@
+import { datagouv } from '@datagouv/components-next'
+import type { UseFetchFunction } from '@datagouv/components-next'
+import CdataLink from '~/components/CdataLink.vue'
+import { ClientOnly, TextClamp } from '#components'
+
+// Install the @datagouv/components-next config ONCE, at app init. It used to be
+// installed from both app.vue and error.vue, but `app.use(plugin)` is idempotent:
+// landing on an error page first let error.vue install an INCOMPLETE config (no
+// metricsApiUrl), and app.vue's later install was then a no-op. Navigating to a
+// page using `useMetrics` afterwards threw "metricsApiUrl and apiBase must be
+// configured". A plugin runs for both the normal and the error render, so there is
+// a single, complete config.
+export default defineNuxtPlugin((nuxtApp) => {
+  const runtimeConfig = useRuntimeConfig()
+  const siteConfig = useSiteConfig()
+
+  nuxtApp.vueApp.use(datagouv, {
+    name: runtimeConfig.public.title,
+    baseUrl: siteConfig.url,
+    trustedDomains: runtimeConfig.public.trustedDomains,
+    apiBase: runtimeConfig.public.apiBase,
+    chartsApiBase: runtimeConfig.public.chartsApiBase,
+    devApiKey: runtimeConfig.public.devApiKey,
+    datasetQualityGuideUrl: runtimeConfig.public.datasetQualityGuideUrl,
+    maxJsonPreviewCharSize: runtimeConfig.public.maxJsonPreviewCharSize,
+    maxPdfPreviewByteSize: runtimeConfig.public.maxPdfPreviewByteSize,
+    maxXmlPreviewCharSize: runtimeConfig.public.maxXmlPreviewCharSize,
+    metricsApiUrl: runtimeConfig.public.metricsApi,
+    pmtilesViewerBaseUrl: null,
+    schemaValidataUrl: runtimeConfig.public.schemaValidataUrl,
+    schemaDocumentationUrl: runtimeConfig.public.schemasSite.url,
+    schemasSiteUrl: runtimeConfig.public.schemasSite.url,
+    schemasSiteName: runtimeConfig.public.schemasSite.name,
+    tabularApiUrl: runtimeConfig.public.tabularApiUrl,
+    tabularApiDataserviceId: runtimeConfig.public.tabularApiDataserviceId,
+    tabularAllowRemote: true,
+    customUseFetch: useAPI as UseFetchFunction,
+    textClamp: TextClamp,
+    appLink: CdataLink,
+    clientOnly: ClientOnly,
+    forumUrl: runtimeConfig.public.forumUrl,
+    searchDebounce: runtimeConfig.public.searchDebounce,
+  })
+})
diff --git a/tests/datasets/datagouv-config-after-error.spec.ts b/tests/datasets/datagouv-config-after-error.spec.ts
new file mode 100644
index 000000000..4dae35056
--- /dev/null
+++ b/tests/datasets/datagouv-config-after-error.spec.ts
@@ -0,0 +1,36 @@
+import { test, expect } from '../base'
+
+// The @datagouv/components-next config is installed once, from a Nuxt plugin.
+// It used to be installed from BOTH app.vue and error.vue, and `app.use(plugin)`
+// is idempotent: landing on an error page first let error.vue install an
+// INCOMPLETE config (without metricsApiUrl), so app.vue's later install became a
+// no-op. Navigating afterwards to a page using `useMetrics` (a dataset detail
+// page) then threw "metricsApiUrl and apiBase must be configured", leaving the
+// URL changed but the previous page still rendered.
+//
+// This test starts on a 404 (error.vue) and navigates, entirely client-side, all
+// the way to a dataset detail page. assertNoConsoleErrors catches the thrown
+// error; the heading assertions catch the "content stuck on the search page"
+// symptom.
+test('a dataset detail page renders after starting on the error page', async ({ page }) => {
+  await page.goto('/datasets/azerty')
+  await expect(page.getByRole('heading', { level: 1, name: '404' })).toBeVisible()
+
+  // SPA navigation: error page -> /datasets -> /datasets/search
+  await page.getByRole('link', { name: 'Données', exact: true }).click()
+  await expect(page).toHaveURL(/\/datasets$/)
+  await page.getByRole('link', { name: 'Voir tous les jeux de données' }).click()
+  await expect(page).toHaveURL(/\/datasets\/search/)
+
+  // SPA navigation to the first result, a dataset detail page that uses useMetrics
+  const firstResult = page.locator('.search-results ul > li').first().getByRole('link').first()
+  const datasetTitle = (await firstResult.textContent())?.trim() ?? ''
+  expect(datasetTitle).not.toBe('')
+  await firstResult.click()
+
+  // The detail page actually rendered: URL is a dataset slug and the heading is
+  // the dataset title, not the search page heading.
+  await expect(page).toHaveURL(/\/datasets\/[^/]+$/)
+  await expect(page.getByRole('heading', { name: 'Recherche avancée d\'un jeu de données' })).toBeHidden()
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(datasetTitle)
+})