[Feature Request] Add meta fields to routes

[Septias]

I want to add meta fields to the routes for permissions and authentification. What is the recommended way to do that?

[brattonross]

Hey @Septias, great question.

This isn't currently supported, but I plan to add support soon via a custom Vue SFC block where you'd be able to set route config.

For example, it may look something like:

<page>
{
  "meta": {
    "requiresAuth": true
  }
}
</page>

Let me know what you think about this idea!

[IgorSzymanski]

And how is this supposed to work with components written in .jsx/.tsx files?

[brattonross]

Hi, whilst I'm working on adding that custom SFC block, I thought that it was worth noting that as of release v0.5 you can now supply an extendRoute function in your config that allows you to modify your routes after they have been resolved, so it is possible to add route meta via this method as well 😀

[arpadgabor]

(Unrelated: I've just checked out your plugin and seems nice.)

Regarding the extendRoute function, to me it seems the place for it is not in vite.config. I think a better option would be implement a method like generateRoutes() that takes a config object as argument and returns the route array. This way you don't bloat the vite.config with stuff that should be elsewhere.

[brattonross]

Funny you should say that, I was considering something similar recently. If I'm understanding your suggestion correctly, we could alter the virtual file returned by the plugin so that instead of directly exporting an array of routes, it instead exports a function which can be called to generate the routes? Something like:

import { generateRoutes } from 'voie-pages';

const routes = generateRoutes();

We could then even go a step further and allow the user to pass in some kind of function to generate parts of the - if not the entire - virtual file, which would allow for generating routes however the user wants. This, in combination with allowing the user to change the module id that voie resolves, could potentially allow for generating routes config for any router -- not just Vue Router.

[arpadgabor]

Yes, that's exactly what I'm talking about. And while thinking about it, this could be expanded further by giving users the ability to use custom properties in file names.

Take this file name as example: pages/users/[id]{user;defined;string}.vue.

At a first look this could get bloated, but having a way of adding some custom metadata to a file would give some nice freedom of movement. What the user does with that data is up to them (layout name, user page, admin page, etc).

[mariusa]

Now I'm using https://github.com/ktsn/vue-route-generator#route-custom-block which can handle this at top of a .vue file:

<route>
{
  "meta": {
    "auth": false
  }
}
</route>
<template>
    <div class="d-flex align-items-center min-vh-100">

Could this also work in voie?