Prefix param typing

[boussadjra]

I'm extending my routes by adding lang param as shown below :

import { createRouter, createWebHistory } from "vue-router/auto"
import type { RouteRecordRaw } from "vue-router/auto"

function prefixPathDeep(routes: RouteRecordRaw[], prefix: string): RouteRecordRaw[] {
    return routes.map((route) => {
        if (route.path && !route.children) {
            route.path = route.path.startsWith(prefix) ? route.path : prefix + "/" + route.path
        }
        if (route.children) {
            route.children = prefixPathDeep(route.children, prefix)
        }
        return route
    })
}

export const router = createRouter({
    history: createWebHistory(import.meta.env.VITE_BASE_URL),
    extendRoutes(routes) {
        return prefixPathDeep(routes, "/:lang")
    },
})

How to allow the router to infer that parameter, for example I've :

router.push({
     name: 'Products',
     params: { lang: locale },
})

I got the error

Object literal may only specify known properties, and lang does not exist in type: {category : string}

[posva]

extendRoutes is runtime only. In your case you can add that prefix to all routes in the config with routesFolder:

    VueRouter({
      routesFolder: [
        // can add multiple routes folders
        {
          src: 'src/pages',
          // can even add params
          // path: '[lang]/',
        },
	  ]
	})

[boussadjra]

Thank you, I tried this and I restart the dev server/vscode, but it still not recognize the lang param here the relevant parts from my vite config :

export function getFileName(node: any): string {
    if (node.parent?.isRoot() && node.value.pathSegment === "") return "Root"

    let name = node.value.subSegments
        .map((segment: any) => {
            if (typeof segment === "string") {
                return segment.split("/").pop()
            }
            return ""
        })
        .join("")

    return name.startsWith(":") ? "" : name
}
....
 VueRouter({
                routesFolder: [
                    {
                        src: "src/views",
                        path: ":lang/",
                    },
                ],
                dts: "./typed-router.d.ts",

                getRouteName: (routePath) => {
                    return getFileName(routePath)
                },
            }),

an snippet from typed-router.d.ts :

declare module 'vue-router/auto/routes' {
  export interface RouteNamedMap {
    'Playground': RouteRecordInfo<'Playground', '/:lang/Playground', Record<never, never>, Record<never, never>>,
       'Account': RouteRecordInfo<'Account', '/:lang/Account/:mode/:id?', { mode: ParamValue<true>, id?: ParamValueZeroOrOne<true> }, { mode: ParamValue<false>, id?: ParamValueZeroOrOne<false> }>,

  ....

[posva]

That's a bug: #312

[posva]

My bad, it already works: it needs to follow the path syntax, so [lang] instead of :lang

[boussadjra]

Do you mean to change path: ":lang/", to path: "[lang]",?

[posva]

[lang]/