CODEWITHSUNDEEP
vue.jsnuxt3.js
typed-sigterm
typed-sigterm

Reputation: 1067

Route-Validation in Nuxt3

If Route-Validation returns false, it will show /error.vue but not render the component of /:pathMatch(.*)*.

~/plugins/route.ts:

export default defineNuxtPlugin(() => {
  useRouter().addRoute({
    path: '/:pathMatch(.*)*',
    component: () => import('~/pages/404.vue'),
  });
  return {};
});

~/pages/404.vue:

<template>err</template>

~/pages/problem/[id]/index.vue:

<script lang="ts" setup>
definePageMeta({
  validate(route) {
    return new RegExp('^\\d+$').test(String(route.params.id));
  },
});
</script>
<template>problem</template>

Navigation Tests:

Upvotes: 0

Views: 1587

Answers (2)

typed-sigterm
typed-sigterm

Reputation: 1067

Offical reply: https://github.com/nuxt/nuxt/issues/19327

This is by design.

Upvotes: 0

Ellrohir
Ellrohir

Reputation: 1944

Nuxt routing is based on directories. "Catch-all" doesn't apply recursively.

What you seek is:

/pages
├─ /foo
│  └─ [nested].vue
└─ [root].vue

Upvotes: 0

Related Questions