int paramParser not modifying value

[OwenVey]

Reproduction

https://github.com/OwenVey/vue-router-int-parser

Steps to reproduce the bug

I have a route file [id=int].vue and route.params.id has a type of number but when I log it or log the typeof I am seeing that it is actually a string.

My vite.config.ts file looks like:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import VueRouter from 'vue-router/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    VueRouter({
      dts: './src/route-map.d.ts',
      experimental: {
        paramParsers: true
      }
    }),
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Expected behavior

The value of route.params.id should be a number

Actual behavior

The value of route.params.id is a string

Additional information

No response

[posva]

You need to use the experimental router:

import { createWebHistory } from 'vue-router'
import { experimental_createRouter as createRouter } from 'vue-router/experimental'
import { handleHotUpdate, resolver } from 'vue-router/auto-resolver'

export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  resolver,
})

if (import.meta.hot) {
  handleHotUpdate(router)
}

And also manually register RouterLink and RouterView in main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { RouterLink, RouterView } from 'vue-router'

const app = createApp(App)

app.component('RouterLink', RouterLink)
app.component('RouterView', RouterView)

app.use(router)

app.mount('#app')

[OwenVey]

That's working. I am now noticing an issue with VueUse's useRouteQuery and I have added it to my reproduction above.

1. Navigate to http://localhost:5173/123
2. Type "a" in the search input
3. Notice the following warning in the Console:

Which then navigates to http://localhost:5173/?search=a

[posva]

That's a different question 😄
VueUse still doesn't support the experimental router. I would recommend you to write your own useRouteQuery. There are plans to add a native one though
Relative locations can no longer be implicit with custom resolvers, this is for type safety. It should be possible in the future to do router.push({ query: {} }, route) (with const route = useRoute()). For the moment you need to use resolve: router.push(router.resolve(relativelocation, currentLocation)