Allow defining properties in meta

[posva]

Ref vuejs/vue-router#3183

Allow extending meta in TS:

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    nested: { foo: string }
  }
}

export const router = createRouter({
  routes: [
    // error because `nested` is required
    { path: '/', component: Home, meta: {}
    // No Error because `meta` can be omitted
    { path: '/', component: Home }
  ]
})

I don't know if there is a way of creating an error on the last one without going into generics since it involves making the meta field conditionally required

[github-actions]

size-limit report

Path	Size
size-checks/webRouter.js	6.72 KB (0%)
size-checks/webRouterAndVue.js	23.58 KB (0%)

[LiamDotPro]

Hey @posva Is there a chance that the router guard next exposed on router.beforeEach((to, from, next) and such will also be fixed with this merge? We originally followed the docs located here: https://router.vuejs.org/guide/advanced/meta.html and added meta:{private:true} to our routes and started passing it using the next callback like below:

next({
          name: 'login',
          path: '/login',
          meta: {
            private: false
          },
          params: { nextUrl: to.fullPath }
})

This approach worked in javascript but now were migrating to typescript I'm unable to figure out how we might be able to satisfy the compiler. I tried extending the routerguard as below but to no alas it still complains.

interface ExtendedNavigationGuard extends NavigationGuardNext<Vue> {
  meta: { private: boolean }
}

I'm not sure it's possible for us to move to a non stable version of the router, so were investigating a workaround. Though If you can verify if this will help out our situation I'd appreciate it! :-)

[LiamDotPro]

For tracking sakes, here's the failed stackoverflow ticket I opened prior to finding this thread and pull request. I'll update it once It's been resolved https://stackoverflow.com/questions/63754614/how-to-correctly-extend-vue-navigationguardnext-typescript-interface-to-add-meta

[posva]

@LiamDotPro meta can only be defined on the route records. That would be the same as passing state, which is not supported, you should definitely replace it with query params or a lib like vuex. You can still modify to.meta to add some kind of during-navigation state but it's still not documented so use it at your own risk