loading...

Discussion on: 5 ways of displaying i18n translations in Vue

Collapse
haruanm profile image
Haruan Justino

There is the v-t directive to prevent re-execution of the translation too.

Collapse
anzelika profile image
Anzelika Author

Oh, very cool! Honestly was not even aware of that. Will replace the 4th point with that, since it's much cleaner than v-text :)

Collapse
anzelika profile image
Anzelika Author

Though I just realised it's not reactive (if you change locale, it won't refresh the messages. v-text does though, without having to refresh the page. Do you know if there is a way to achieve reactivity with v-t?

Thread Thread
haruanm profile image
Haruan Justino

You will need to re-render the component.
This dirty workarround can be done in some ways listed here:
michaelnthiessen.com/force-re-render/

When I needed to, I used this:

<template>
  <my-component v-if="renderComponent" />
  export default {
    data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // Remove my-component from the DOM
        this.renderComponent = false;

        this.$nextTick(() => {
          // Add the component back in
          this.renderComponent = true;
        });
      }
    }
  };

and executed the forceRerender on watch for language change.