Route Validation fails with multiple routes containing a `[parameter]` in the same folder

[varna]

Environment

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.3.1

Reproduction

https://stackblitz.com/edit/nuxt-starter-x96hzs?file=package.json

Describe the bug

If you create two directories with parameter in /pages that contain definePageMeta with validate function, at least one of them doesn't work as intended.

https://nuxt.com/docs/getting-started/routing#route-validation

The validate property accepts the route as an argument. You can return a boolean value to determine whether or not this is a valid route to be rendered with this page. If you return false, and another match can't be found, this will cause a 404 error.

From this, you could assume, that:

• if validate returns true, the route is matched.
• If you return false, return 404 and stop any subsequent matching.

If I create two routes like:

• /pages/[posts]/index.vue
• /pages/[projects]/index.vue

And avoid returning false, by using /pages/[posts]/index.vue:

definePageMeta({
  validate: (route) => {
    const { posts } = route.params;
    if (posts === 'posts') {
      return true;
    }
  },
});

and /pages/[projects]/index.vue

definePageMeta({
  validate: (route) => {
    const { projects } = route.params;
    if (projects === 'projects') {
      return true;
    }
  },
});

I should have two working routes at /posts and /projects. Unfortunately, one of the routes works, while other returns 404.

Additional context

No response

Logs

No response

[danielroe]

This is vue-router behaviour - it will only match one of the pages generated: see https://paths.esm.dev/?p=AAMsIPQg4AIMpkjtgAsERhMwKIBACQgoSWADZB4wvcIA8g..&t=/test/thing#. You can alternatively customise the path using route matching syntax like this within the page:

<script setup lang="ts">
definePageMeta({
  path: '/test/:bar(baz|qux)'
})
</script>

This will only work for patterns, not for more complex validations that rely on async data fetching. For that, you might have to use app/router.options or another solution.