Vuetify-module: Example Lang with Nuxt - Vuetify module

[berenicestr]

Hi!

I am using Nuxt with internationalization nuxt-i18n with this nuxt-vuetify module.

I would like to integrate Nuxt-i18n with Vuetify Internazionalization but I don't know if there is any option that I can configure or how can I do it.

I open a question here https://cmty.app/nuxt/nuxt-i18n/issues/c298 but I don't know how to resolve it.

I does apply the default lang, but when I switch other lang in Nuxt-i18n doesn't change the Lang of the Vuetify components.

I see there is an option in the Nuxt-vuetify module to add in the nuxt-config.js with Lang in the Vuetify section properties.

Please, any documentation or example about it?

Thanks and Regards

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[kevinmarrec]

@berenicestr

https://github.com/nuxt-community/vuetify-module#optionspath

// vuetify.options.js
export default function ({ app }) {
  return {
    lang: {
      t: (key, ...params) => app.i18n.t(key, params)
    }
  }
}

https://vuetifyjs.com/en/customization/internationalization

You would prefer a i18n section in docs that showcases how to switch i18n Vuetify locale when changing the global i18n one, right ?

[kevinmarrec]

Closing in favor of https://github.com/nuxt-community/vuetify-module/issues/153

[kevinmarrec]

@berenicestr Maybe you wanted to do :

Vue.mixin({
  watch: {
    '$i18n.locale' (newLocale) {
      this.$vuetify.lang.current = newLocale
    }
  }
})

as global mixin, or just add the watch in one of your layout/page depending on what you're willing to achieve.

[berenicestr]

Great! 🎉 resolve my problem!🥳 Thank you very much @kevinmarrec 👏

My hero 🤩

[kamerat]

You can also create a plugin taking advantage of beforeLanguageSwitch

This feels to me like a more clean nuxt way than a global watcher.

// plugins/i18n.js
export default ({ app }) => {
    app.i18n.beforeLanguageSwitch = (oldLocale, newLocale) => {
        app.vuetify.framework.lang.current = newLocale;
    };
};

// nuxt.config.js
// ...
plugins: ['~/plugins/i18n.js'],
// ...