Unified custom route data

[cubxx]

Description

SFC custom block and JSX/TSX YAML format comments are not perfect method to custom route data, especially when I want to use imported data in route data:

import { mdiHomeOutline } from '@mdi/js';
const route = {
  meta: {
    btnProps: {
      tip: 'home',
      icon: mdiHomeOutline,
      order: 2,
      hideOn: 'mobile',
    },
  },
}

Suggested solution

custom route data in runtime code is maybe better method, it has natural framework-independence advantage, and support type check:

// src/pages/index.tsx
import type { RouteMeta } from 'vue-router';
import { mdiHomeOutline } from '@mdi/js';
export const route = {
  meta: {
    btnProps: {
      tip: 'home',
      icon: mdiHomeOutline,
      order: 2,
      hideOn: 'mobile',
    } satisfies RouteMeta,
  },
}
export default ...

Alternative

No response

Additional context

No response

Validations

• Follow the Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[hannoeru]

If I add too much support to this is kind of thing which is framework specific, will cause this plugin to become hard to maintain.
I personal will recommend using some existing solution like Remix to resolve that kind of requirement.

[cubxx]

@hannoeru I don't think it is framework specific. Actually, merging custom data from page file with generated route from plugin in virtual module is feasible methods, which is what I do currently.

I used import.meta.glob to achieve it, just like:

// as a part of virtual module
const customs= import.meta.glob(
  ['~/pages/**/*.tsx', '!~/pages/**/components/*'],
  { import: 'route', eager: true },
);

of course, it will throw error when the page file don't export named route data, so we can add export route = {} to solve it on transform hook.