How do you perform locale changing?
Interviewer Expectations for this Question
01
Core Competency
Assesses fundamental understanding of Vue.js conventions, runtime behavior, and memory/performance considerations.
02
Evaluation Criteria
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Comprehensive Model Answer
Verified Solution
All child components of a root instance are localized using the locale property of the VueI18n class. You can
change the value of the locale property of the VueI18n instance as below.
const i18n = new VueI18n({
locale: 'de', // set locale
...
})
// create root Vue instance
new Vue({
i18n,
...
}).$mount('#app')
// change other locale
i18n.locale = 'en'
You can also use component's VueI18n instance referenced as the $i18n property which will be used to change the
locale.
<template>
<div class="locale-changer">
<select v-model="$i18n.locale">
<option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
</select>
</div>
</template>
<script>
export default {
name: 'locale-changer',
data () {
return { langs: ['de', 'en'] }
}
}
</script>
****
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.