Handling dot in vue-router params using vue 3

Question

If route params contains dot(.) vue redirect the route to 404. In vue 2 we can allow/handle dot in router params using following rule in webpack:

devServer: {
      historyApiFallback: {
          disableDotRule: true
      }
 }

But vue 3 use vite instead of webpack. How to handle dot in parameters now?

route example are following:

{
  path: your-route/:params",
  component: somecomponent,
}

Answer 1

I had the same problem and based on one of the question comments I went to the github issue about this problem and they recommend a plugin for vite that solves it.

Install it with

npm install --save-dev vite-plugin-rewrite-all

And add it to vite.config.js

import pluginRewriteAll from 'vite-plugin-rewrite-all';

export default {
  plugins: [pluginRewriteAll()]
}

Check out the github issue https://github.com/vitejs/vite/issues/4344

And the plugin's github https://github.com/ivesia/vite-plugin-rewrite-all.

Answer 2

Vite 5 allows dots in URL params without the need for any plugins. It's mentioned here in this thread.

You can update to Vite 5 with

npm install -D vite@latest