Texts of some components don't change after changing local

[efecancorbacioglu]

Hi!

I'm developing a project with nuxt3 and I try to implement i18n in the project(I use options api in some components whereas I use composition api in others). I created a component named "selectLanguage" and I use it in navbar.vue component.

When I change the locale in selectLanguage.vue, some texts are translated while others are not(components need to re-mount to see the changes). I noticed that this problem arises from the way props are defined. I'm adding an example code below to explain what I mean:

// "msg" text changes in Component1 but it doesn't in Component2
<Component1 :msg="t('myMessage')" />
<Component2 :msg="myMessage" />

data(){
  return{
      myMessage: t('myMessage')
   }
}

I know that If I assign the data in a computed, the message directly changes but there are a lot of component and route in my project so I don't want to change all data to computeds.

I've been researching some solutions for this problem and I've encountered lots of ideas so I'm a bit confused. I'm new in vue and nuxt so maybe I have missed out some simple solution.

The thing is I'm also trying to find best practice of implementing i18n in a nuxt project. I use "no_prefix" strategy in the project and maybe I can solve this problem with using other strategies by manipulating url but I want to solve it in current situation if it is possible.

Is there any chance to solve this problem under these conditions? If there is or not could you also share your ideas and experience about which strategy is better to use i18n libary.

Thank you!

[edgarsn]

I guess you need to use computed instead of data.

[efecancorbacioglu]

hi @edgarsn, as I mentioned in my discussion, there are many component in my project so it is hard to change all data to computed in my case but thank you for your reply anyway.

I solved my problem by assigning the locale value to nuxtPage as a key value and it works. I am still open for better ideas if there are.

Note: I changed the strategy from 'no_prefix' to 'prefix_except_default'