How to make source dynamic for vue-i18n

Question

I have this line of code which is outside of script tag <i18n locale="en" src="../../local/en/index/first.json"></i18n>

This one uses static source, is there a way for me to import a file by setting the src dynamically, or better set this as a prop when possible?

Answer 1

Yes, you can set the file path in data() and pass it dynamically as a prop to i18 component.

you can change this path on demand:

  data() {
return {
  locale: 'en',
  dynamicSrc: `../../local/${this.locale}/index/first.json`
};

}

and pass it to component:

<i18n :src="dynamicSrc"></i18n>