Remove dynamic fallback page listing on error 404

error.vue

@@ -3,39 +3,18 @@
     <DesktopMenu :items="menu.items" class="hidden lg:block" />
     <MobileMenu :items="menu.items" class="block lg:hidden" />
     <div class="container mt-20 text-4xl font-overpass font-light flex-grow">
-      <div
-        v-if="
-          error.statusCode === 404 &&
-          availableLocales &&
-          availableLocales.length > 0
-        "
-        class="text-sogblue"
-      >
-        {{ $t('error.language') }}
-        <div class="text-lg text-gray-800 mt-2 font-normal">
-          {{ $t('error.availableIn') }}
-          <NuxtLink
-            v-for="availableLocale in availableLocales"
-            :key="availableLocale.code"
-            :to="switchLocalePath(availableLocale.code)"
-            class="hover:text-sogblue-dark transition-colors duration-100"
-          >
-            {{ availableLocale.name }}
-          </NuxtLink>
-        </div>
-      </div>
-      <div v-else-if="error.statusCode === 404" class="text-sogblue">
-        {{ $t('error.404') }}
+      <div v-if="error.statusCode === 404" class="text-sogblue">
+        {{ t('error.404') }}
         <div class="text-lg text-gray-800 mt-2">
           <NuxtLink
             :to="localePath('/')"
             class="hover:text-sogblue-dark transition-colors duration-100"
           >
-            {{ $t('error.backHome') }}
+            {{ t('error.backHome') }}
           </NuxtLink>
         </div>
       </div>
-      <div v-else>{{ $t('error.default') }}</div>
+      <div v-else>{{ t('error.default') }}</div>
     </div>
     <SogFooter
       :items="footer.items"
@@ -47,43 +26,18 @@
 
 <script setup lang="ts">
 import type { NuxtError } from '#app';
-import type { LocaleObject } from '@nuxtjs/i18n';
+import { useData } from '@/types/composables'
 
-const props = defineProps<{ error: NuxtError }>()
+defineProps<{ error: NuxtError }>()
 
-const route = useRoute()
-const { locale, locales, t } = useI18n()
+const { locale, t } = useI18n()
 
 const localePath = useLocalePath()
-const switchLocalePath = useSwitchLocalePath()
 
 useHead({
   title: t('sog'),
 })
 
-const lookupAvailableLocales = async () => {
-  const availableLocales: LocaleObject[] = []
-  if (props.error?.statusCode === 404) {
-    for (const locale in locales.value) {
-      try {
-        await queryContent(
-          `${locales.value[locale].code}/${route.params.slug}`
-        ).findOne()
-        availableLocales.push(locales.value[locale])
-      } catch {
-        // Ignore locales that cannot be loaded
-      }
-    }
-  }
-  return availableLocales
-}
-
-const menu = await queryContent(locale.value, 'menu').findOne()
-const footer = await queryContent(locale.value, 'footer').findOne()
-const availableLocales = ref<LocaleObject[]>(await lookupAvailableLocales())
-
-watch(
-  () => route.params.slug,
-  async () => availableLocales.value = await lookupAvailableLocales()
-)
+const menu = await useData(`menu-${locale.value}`, () => queryContent(locale.value, 'menu').findOne(), {watch: [locale]})
+const footer = await useData(`footer-${locale.value}`, () => queryContent(locale.value, 'footer').findOne(), {watch: [locale]})
 </script>

pages/[...slug].vue

@@ -18,6 +18,9 @@ const { data, error } = await useAsyncData(`page-${[...route.params.slug].join("
     pages = await queryContent(defaultLocale, ...route.params.slug).where({ _path: ['', defaultLocale, ...route.params.slug].join('/')}).limit(1).find()
     fallback = true
   }
+  if (pages.length === 0) {
+    throw new Error("Could no find page " + [...route.params.slug].join("/"))
+  }
   return { page: pages[0], fallback }
 })