Description
🛠 Environment
Nuxt 3
@nuxtjs/i18n (^9.x)
vue-i18n (^11.x)
Vuetify 3 (with vuetify-nuxt-module)
🐞 Problem
I'm using Vuetify 3 with Nuxt 3 and @nuxtjs/i18n.
Even after registering the official Vuetify translation file via vuetifyOptions.locale.messages,
Vuetify components still emit warnings that $vuetify.xxx keys cannot be found.
Example warning:
[intlify] Not found '$vuetify.open' key in 'en' locale messages.⚙️ My Configuration
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'
import vuetifyEn from './i18n/locales/vuetify/en.json' with { type: 'json' }
export default defineNuxtConfig({
modules: [
'@nuxtjs/i18n',
'vuetify-nuxt-module'
],
i18n: {
lazy: true,
langDir: 'locales/',
defaultLocale: 'en',
locales: [
{ code: 'en', file: 'en.ts' }
],
vueI18n: './i18n.config.ts'
},
vuetify: {
vuetifyOptions: {
locale: {
locale: 'en',
messages: {
en: vuetifyEn // ✅ official Vuetify messages imported here
}
}
}
}
})// locales/en.ts
import vuetifyEn from './vuetify/en.json' with { type: 'json' }
export default {
someKey: 'Some message',
$vuetify: vuetifyEn // also tried this
}✅ What I've tried
Confirmed that the vuetifyEn object contains keys like "open", "close", "dataFooter.itemsPerPageText" etc.
Used both $vuetify.open and vuetify.open key structures
Tried flattening keys (e.g. "vuetify.open": "Open")
Enabled flatJson: true in i18n.config.ts
Tried injecting Vuetify’s locale.t = i18n.t inside a Nuxt plugin
Console-verified that i18n messages and Vuetify locale are both set correctly
Yet still, Vuetify internal components (like , ) print warnings like:
[intlify] Not found '$vuetify.dataFooter.itemsPerPageText' key in 'en' locale messages.
❓ What I'm asking
Does Vuetify 3 expect $vuetify.xxx messages to be available via vue-i18n?
If vuetifyOptions.locale.messages is set, shouldn't Vuetify use that internally?
What's the recommended or official way to integrate Vuetify 3 i18n with Nuxt 3 and @nuxtjs/i18n module?
✅ Expected Behavior
I expect Vuetify to resolve $vuetify.xxx keys via either:
The messages passed in vuetifyOptions.locale.messages, or
Keys defined in the vue-i18n message object (especially when using @nuxtjs/i18n)
Thanks in advance! 🙏
Let me know if there's a recommended integration pattern that avoids this warning and allows Vuetify components to use localized messages correctly.