How to create a composable which returns modified path?

[vaheqelyan]

Hey guys
Is it possible to create a composable which returns route object but modifies the path property in it?

export const useAppRoute = () => {
  const route = useRoute()
  
  // { path: '/en-us/about' } -> { path: '/about' }
  // I'm trying to get the path, without containing `params.lang`
  return { ...route, path: route.path.slice(`/${route.params.lang}`.length) }
}

Obviously this doesn't work

This is the closest solution I could come up with

export const useAppRoute = () => {
  const route = useRoute()

  const reactiveRoute = reactive(route)

  watch(
    route,
    (newRoute) => {
      Object.assign(reactiveRoute, newRoute, {
        purePath: newRoute.path.slice(`/${newRoute.params.lang}`),
      })
    },
    { immediate: true, deep: true }
  )

  return reactiveRoute
}

It seems that i can't write a set method for path. I'm doing refactoring and it would be really easy if I could rewrite the path property.

set' on proxy: trap returned falsish for property 'path'

Sorry guys, I'm not very familiar with proxy in js.

Is there another approach you think might work better?

Thanks

[posva]

the route object is readonly, so you can't do reactive(useRoute()) or Object.assign(route, newRoute) like you do. The first solution is closer to what you need to do, it's just not reactive but you could return a computed instead:

  return computed(() => ({ ...route, path: route.path.slice(
	route.indexOf('/', 1) // everything till the first /
) }))

[vaheqelyan]

Thank's for the answer. I've tried this before, but the result is not what i want.

It returns an object which only contains path, but I also need other properties (query, fullPath...)