Catch-all route

[zanmato]

💬 Question here

Is it possible to add a catch-all route like: https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments

E.g. /categories/[...slug] would match /categories/1 and /categories/1/2

Your Environment

fastify/vite & fastify/vue

[metcoder95]

You can use a wildcard for it (e.g. /categories/*).

Depending on your setup, you might need to set it after other routes that share the same resource.

Just be cautious that this kind of wildcard routes (or ones that comes out from a Regex) are expensive in terms of performance

[zanmato]

Where would I put that, let's say in the context of the vue-kitchensink example? I tried altering the param regex to allow wildcards, e.g. naming a file [*].vue. But it doesn't seem to work, perhaps because the vue router expects /:slug* and fastify just /*?

[metcoder95]

Sorry, for that I'm clueless; not really sure how they work 🙁

[zanmato]

For a workaround I changed the param pattern to allow + at the end

viteFastifyVue({ paramPattern: /\[([\w]+\+?)\]/ }),

I named my file [slug+].vue which results in a /:slug+ route which is compatible with vue-router, and added a hook to replace it with a wildcard before it is added to the fastify router:

server.addHook("onRoute", (route) => {
  route.url = route.url.replace(/\:[^\+]+\+/, "*");
});