How to use conditions with route names

[saifobeidat]

we're moving our project from Quasar to Nuxt and nuxti18n, we faced an issue that we were using some if-conditions based on the route name like this:

default-layout.vue

  watch: {
    $route: {
      handler: function (value) {
        if(value.name == 'signin' ){
          // some gogic
         }
      },
      immediate: true,
    },
  },

now this isn't possible, since nuxti18n provides a unique name for each locale so the signin routes would be like this:

signin___en_us
signin___en_uk
signin___ar_sa

so what would be the best way to handle this case?

however, I tried to use router-extra-module but to define a custom name, but it won't work with the generated routes format..

I tried another approach, adding a meta to the page:

export default {
  meta: {
    name: "signin",
  }
} 

but the issue with this, it cant be accessed by $route, or inside the watchers like this:

  watch: {
    $route: {
      handler: function (value) {
        console.log(value);
      },
      immediate: true,
    },
  },

the meta value returns null..
but you can access the meta through this:
this.$nuxt.$options.context.route.meta But this is very long :/

anyone has insights?

[saifobeidat]

I just tried another way, where you can access the meta inside the middleware
middleware({ route }) { console.log(route.meta ); },

[rchl]

You have the getRouteBaseName() API for getting just the base name.

[saifobeidat]

@rchl oh I didn't know about it, thanks!

However, I tried to use it this way

let name = this.$i18n.getroutebasename(this.$route);
console.log({ name });

And i got this error:
this.$i18n.getroutebasename is not a function
this is very weird, as I tried to call it different places like middleware, plugin, created(), mounted() always throwing this error.. where as in a different place I was able to use this function getLocaleCookie() and it works fine..

do you have any idea?

[rchl]

This is not the correct method name (more specifically case). Please check documentation.

[saifobeidat]

@rchl I don't know how the function name was lower-cased when I pasted it here.. sure I used this function getRouteBaseName and getting the same issue

[rchl]

It's also a function defined at this, not i18n object

[saifobeidat]

sorry it really wasn't clear that it's under the "Extension of Vue" section, thank you it's working now!