Vue Answers

How to call router.push a locale route in Nuxt with nuxt-i18n?

Spread the love

In Nuxt.js with nuxt-i18n, we can call this.$router.push to navigate to a localized route.

To do this we can try the following.

Assuming we have a page called example.vue and we want to navigate to a localized route:

    <button @click="navigateToLocalizedRoute">Go to Localized Route</button>

export default {
  methods: {
    navigateToLocalizedRoute() {
      // Use this.$router.push to navigate to a localized route
      this.$router.push({ path: this.switchLocalePath('/localized-route') });

In this example, we define a method navigateToLocalizedRoute which will be triggered when the button is clicked.

Inside this method, we use this.$router.push to navigate to a localized route.

We use this.switchLocalePath('/localized-route') to get the localized path for the route /localized-route.

When calling this.$router.push, we pass an object with the path property set to the localized path.

Make sure we have properly configured the nuxt-i18n module in our Nuxt.js project, including setting up locales and defining localized routes in our nuxt.config.js file.

This method should work for navigating to any localized route within our application.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *