How to change the language of whole application from the dropdown in Navbar component in vue-CodePudding

I created a language selection dropdown in my Navbar component. So here is my navbar component:

<div>
                <h6>{{ translate("welcomeMsg")}} </h6>
                <select name="lang" v-model="lang">
                    <option value="en">English</option>
                    <option value="de">Deutsch</option>
                </select>
            </div>
<script>
export default {
    mixins: [en, de],
    data() {
        return {
            lang: "en",
        };
    },
    methods: {
        translate(prop) {
            return this[this.lang][prop];
        }
    }
}
</script>

So the parent of this component is an Index.vue which is main component in my application.

<div id="app">
        <Topnav/>
        <Navbar/>
        <router-view></router-view>
        <Footer/>
    </div>

Currently, I am able to change the language in my Navbar component. So according to the selected value in the dropdown in Navbar component, welcomeMsg is changing. What I am trying to do is I want to put this pieve of code to TopBar "

", and according to the value of the dropdown in Navbar component, I want to change this value.

Can you help me with this or can you give me an idea how to do it?

CodePudding user response：

If I understand you correctly, you want to use translate method inside Topnav component. This method is however defined in Navbar, so it's not accessible in Topnav.

To use it elsewhere you could create a mixin with this method to import it to any component. I don't recommend this solution though as mixins are making the code messy.

Another solution is to create a component with translate method defined inside. Let this component do just that: translate a message passed by prop and render it inside some div:

<div>
  {{ translatedMessage }}
</div>

<script>
mixins: [en, de],
props: {
  message: {
    type: String,
    default: ''
  },
  language: {
    type: String,
    default: 'en'
  }
},
computed: {
  translatedMessage() {
    return this[this.language][this.message];
  }
}
</script>

You can reuse this component anywhere in the application. You would still need to pass a language prop somehow, possibly the solution would be to use vuex store to do this, since language is probably global for entire application.

For easier and more robust solutions I would use vue-i18n, which @Abregre has already suggested in his comment: https://stackoverflow.com/a/70694821/9463070

CodePudding user response：

If you want a quick solution for a full-scale application and you don't have a problem with dependencies, you could try to use vue-i18n.

It's a plugin for vue that does exactly this for multi-locale websites/apps in Vue. https://www.npmjs.com/package/vue-i18n

EDIT

Then in order to use it globally in your app, you should use vuex. Keep the language selection state there and then wherever you want to use it, you make a computed function with the state.language getter.
The translate function should be a global registered filter https://vuejs.org/v2/guide/filters.html