Router parameter naming style conversion

[tbontb-iaq]

Currently, if I have pages/user/[u-id]/group/[g-id].vue, it will generate params like:

export interface RouteNamedMap {
  "/user/[u-id]/group/[g-id]": RouteRecordInfo<
    "/user/[u-id]/group/[g-id]",
    "/user/:u-id/group/:g-id",
    { u-id: ParamValue<true>; g-id: ParamValue<true> },
    { u-id: ParamValue<false>; g-id: ParamValue<false> }
  >;
}

And u-id and g-id are not valid JavaScript attribute names.

Is it possible to add some kind of automatic conversion? It should also be configurable to convert to multiple naming styles, like camelCase, underscores or raw style.

[posva]

You can indeed automatically convert them by using the extendRoute option. Something like this:

      extendRoute(route) {
                // transform kebab-case to camelCase
        route.params.forEach((param, i) => {
          const newParam = param.paramName.replace(/-([a-z])/g, (g) =>
            g[1].toUpperCase()
          )
          route.path = route.path.replace(`:${param.paramName}`, `:${newParam}`)
          param.paramName = newParam
        })
	  }

But also, the generated TS should be correct, so it should be 'g-id'.

[tbontb-iaq]

Thanks for your answer. Will this become a built-in feature?

[posva]

Right now I don’t think it needs a dedicated option

[tbontb-iaq]

question/[q-id] will be converted to question/:q-id, which will match question/1234-id instead of question/1234. Any good ideas?

[posva]

I updated the function, it does require you to change the path too.

[tbontb-iaq]

Not work, but got warning: [vite] ⚠️ [unplugin-vue-router]: Only absolute paths are supported. Make sure that ":q_id" starts with a slash "/".

[posva]

That's #341, so you will need a bit more code to handle it right now

[posva]

I'm still not convinced at all for the need of an option to handle this. Naming the files so they match vue router params seems like a good practice

[abdul-alhasany]

Technically it is working. But the usual naming convection of files is kebab-case while js variable names are camelCase. It will play nice with ESLint and provide better developer experince.