[Feature Request] Warning in console during development due to missing Spanish translation.

[FcoJacob]

Problem to solve

Despite the specified translations being present in the Spanish language file (es.ts), which can be found here: es.ts on GitHub, I am still receiving warnings in the console during development mode (npm run dev) indicating that the following translations are missing:

• $vuetify.input.clear
• $vuetify.input.appendAction
• $vuetify.open
• $vuetify.close
• $vuetify.datePicker.header

This issue occurs when attempting to apply internationalization to the library as specified in the Vuetify Internationalization documentation using the Composition.vue example.

It seems there might be a discrepancy or an issue with how the translations are being detected or loaded during development.

Proposed solution

Given that the translations seem to be correctly included in the es.ts file, I am puzzled as to why these warnings are still appearing. It would be greatly appreciated if the Vuetify team could take a moment to review the mechanism that detects the presence of translations during development mode. Addressing this issue could not only help in keeping the console cleaner for easier debugging and development but also benefit others who might be facing similar warnings.

Understanding that everyone is busy and that maintaining such a vast library requires a lot of effort and dedication, I want to extend my deepest gratitude for the work the Vuetify team does. Your commitment to making Vuetify such a powerful and user-friendly framework does not go unnoticed, and I sincerely appreciate the opportunity to contribute to its improvement in any way possible.

Thank you in advance for considering this issue and for your continuous support to the developer community. I am looking forward to any guidance or updates you might have regarding this matter.

[johnleider]

The translator just does a simple Object key lookup. You'll have to show us a reproduction of the issue, we can't debug something we can't see, sorry.

[FcoJacob]

Hello,

The warning appears in the following circumstances:

In the file located here, the warning is generated on line 37.

A possible related problem may be on line 63, which may also contribute to the warning. The file is located here.

The console will display the following warning, indicating a possible problem in the above locations:

I would appreciate it if this problem could be investigated and, if possible, resolved. Please let me know if you require any further information or if I can be of any assistance.

Thank you for your attention to this issue.

[johnleider]

I need to see a reproduction outside of your environment if possible.

[FcoJacob]

Excuse me here you go :sweat_smile:, can test here.

It is set to 'en' by default, if you type on the text box 'es' and press the button and then open the console on the inspector, it will show the warning.

[johnleider]

I'm not seeing the warning.

[FcoJacob]

Open the inspector of the navegador. And go to console. Should show it!

[MajesticPotatoe]

Your reproduction isn't importing anything into your createVuetify locale, thus when you switch to a lang other than the default (en) you get the warning when you have rendered components that utilize the locale (in this case clearable)

locale is an opt-in feature, so you need to import and configure the locales you want to use

in your main.js as instructed in the docs:

import { en, es } from 'vuetify/locale'

const vuetify = createVuetify({
  locale: {
    locale: 'en',
    fallback: 'en',
    messages: { en, es },
  }
});

[soygabrielnunez]

@johnleider following the steps that @FcoJacob provided, I was able to reproduce this issue. In my case I used the Safari browser's web inspector.

[FcoJacob]

Many thanks to @MajesticPotatoe for his solution to the problem and to everyone for helping to solve it!

The solution you provided was exactly what I needed. I now understand that when using createVuetify, it's crucial to explicitly import and configure the locales I want to use to avoid warnings when switching to a language other than the default. The clarification that locale is an opt-in feature and how to properly configure it in main.js was particularly helpful.

I would like to ask if this detail is documented somewhere in the official Vuetify documentation. If it isn't, I believe it would be highly beneficial to include it. This information could prevent other developers from facing the same issue I did, especially those working on multilingual applications. Including examples of how to import and configure locales directly in the official documentation would make the process much more intuitive for everyone.

Again, thank you for your help, and I hope this suggestion can further improve the Vuetify documentation.