2-way binding of URL params to v-model

[seascallion]

What problem is this solving

Vue router's props property allows mapping URL query and route params to component props. This is somewhat useful, as it allows decoupling the component from any route-handling logic, but it only supports props, i.e. one-way bindings. We often want to have values that are 2-way bound (i.e. model), both loaded from the URL (either as route params or query params) and saved back to the URL when they change. It would be nice not to have to watch these values and router.replace({ ... }) within the component, as that introduces the same route coupling into the component, that the props property aims to eliminate.

If this is not feasible for any reason, would appreciate pointers on best practices on how to handle syncing values with the URL in a decoupled way.

Proposed solution

This could be accomplished by having another property, events, within the route record to handle events emitted from the component:

// in this example we 2-way bind the query param "foo" to the default model in the component
{ // route record
  name: 'Path',
  path: '/path',
  props: (route) => ({
    modelValue: Number(route.query.foo), // handles ?foo=5 in the URL
  }),
  events: {
    'update:modelValue'(modelValue, route, router) {
      router.replace({ query: { ...route.query, foo: modelValue.toString() } }); // saves foo=5 back to the URL
    },
  },
  // ...
},

// in the component itself, `Component.vue`
const model = defineModel<number>(); // implies both modelValue (default model name) as a prop, and emit:modelValue as an event

It would be very useful for events to work with typescript as well.

Describe alternatives you've considered

I have used these methods to accomplish 2-way binding to the URL:

• a computed property with a getter and setter defined to load and save from URL params
• a ref that is populated from the URL and a watch that uses router.replace(...) to update the URL when the value changes

I believe the proposed solution - handling these bindings within the routing itself - can be cleaner than either of these approaches.

[posva]

Currently, the existing solution is to use a composable like useRouteParams(). I've built my own in many projects but I never took the time to write an RFC to standardized it within Vue Router.
I think the composable approach is better than defining it in the routes because it's typed out of the box and it doesn't interfere with existing implementation but I'm open to listening on other opinions.