How To Make Routes Case Sensitive In Nuxt

I use nuxt.js + vue.js. I need to create case sensitivity of routers. I found the following property: caseSensitive. I’m trying to put it into nuxt.config but it doesn’t work,

Solution 1:

Your code seems to be good. I have tested it, here is mine :

// nuxt.config.jsrouter: {
  extendRoutes(routes) {
    for (const key in routes) {
      routes[key].caseSensitive = true
    }
  }
}

To be more accurate, the nuxt documentation allows to customize routes with router.extendRoutes property in nuxt.config.js. As it said, for each route :

The schema of the route should respect the vue-router schema

So you need to look at the documentation of vue-router where you can find the caseSensitive property.

Important note 1 : This option is available for Vue 2.6.0+ available for Nuxt 2.5.0. So Nuxt version must be at least >= 2.5.0.

Important note 2 : Be sure to call the right url and make your cache empty. I had the same issue because when I enter my url into Chrome search input browser, chrome automatically changed it into lowercase. In fact it used history of my previous request and not the request I wanted.