Missing translation for specific texts in the Amplify UI Authenticator (Vue)

[RihabZA]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

Vue

Which UI component?

Authenticator

How is your app built?

Vite

What browsers are you seeing the problem on?

Chrome, Firefox

Which region are you seeing the problem in?

No response

Please describe your bug.

For the Authenticator component in a Vue application (using @aws-amplify/ui-vue), the i18n translation does not apply to the Email and Phone Number texts in the following screen:

What's the expected behaviour?

This is the output in a React application when using @aws-amplify/ui-react and adding the following code block:

import { Authenticator, translations } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import { I18n } from 'aws-amplify/utils';

I18n.putVocabularies(translations);
I18n.setLanguage('es');
I18n.putVocabularies({
  es: {
    'Email': 'Correo electrónico',
    'Phone Number': 'Teléfono',
  },
});

Help us reproduce the bug!

• Create a Vue application (npm create vue@latest)
• Add the Authenticator component, as outlined in this AWS documentation: https://ui.docs.amplify.aws/vue/connected-components/authenticator
• Run amplify init
• Run amplify add auth
• Add the following code block to the app entry point:

import { Amplify } from 'aws-amplify';
import { Authenticator, translations } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";
import awsconfig from './aws-exports';;
import { I18n } from 'aws-amplify/utils';

I18n.putVocabularies(translations);
I18n.setLanguage('es');
I18n.putVocabularies({
  es: {
    'Email': 'Correo electrónico',
    'Phone Number': 'Teléfono',
  },
});

Amplify.configure(awsconfig);

• Log in with a user that has a non-verified email and phone number.

Code Snippet

// Put your code below this line.

Console log output

No response

Additional information and screenshots

No response

[hbuchel]

Thanks @RihabZA I was able to reproduce this using the latest at

"@aws-amplify/ui-vue": "^4.2.0",
"aws-amplify": "^6.0.15",

We'll work on a fix.

[hbuchel]

Hi @RihabZA just leaving a note that this should be fixed in @aws-amplify/[email protected] which was published today.