import { tryOnScopeDispose } from '@vueuse/core'; import type { MaybeRefOrGetter, Ref } from 'vue'; import type { RouteMeta } from 'vue-router'; export interface ReactiveRouteOptionsWithTransform { route?: ReturnType; transform?: (val: V) => R; } export function useRouteMeta( name: keyof T, defaultValue?: MaybeRefOrGetter, options: ReactiveRouteOptionsWithTransform = {}, ): Ref { const { route = useRoute(), transform = value => value as any as K, } = options; let meta = route.meta[ name ] as any; tryOnScopeDispose(() => { meta = undefined; }); let _trigger: () => void; const proxy = customRef((track, trigger) => { _trigger = trigger; return { get() { track(); return transform(meta !== undefined && meta !== '' ? meta : toValue(defaultValue)); }, set(v) { meta = v; trigger(); }, }; }); watch( () => route.meta[ name ], (v) => { if ( meta === v ) return; meta = v; _trigger(); }, { flush: 'sync' }, ); return proxy as Ref; }