Firebaseui-web: How can the localized version be used inside a Vue2 component ?

[leonardojobim]

How can the localized version be used inside a Vue2 component ?
I tryed the comands below (one at a time), but none of them worked.

</template>
<script>
import firebaseui from "https://www.gstatic.com/firebasejs/ui/2.5.1/firebase-ui-auth__pt.js";
import firebaseui from "./assets/firebase-ui-auth__pt.js";
require ("./assets/firebase-ui-auth__pt.js");
var firebaseui = require ("./assets/firebase-ui-auth__pt.js");

export default {
// ...

The console has shown the message "ReferenceError: firebaseui is not defined" in the command "new firebaseui.auth.AuthUI(firebase.auth())".

[bojeil-google]

Clone the repo.
Build the translated library:
npm run build build-npm-pt
this will generate dist/npm__pt.js

Copy it to your Vue project src folder

Add npm__pt.js to .babelrc ignore list:

"ignore": [
  "src/npm__pt.js"
]

Import it in your Vue component:
import firebaseui from '../npm__fr'

[leonardojobim]

Thanks @bojeil-google

I have done it but it has shown the following error:

./src/assets/npm__pt.js
Module not found: Error: Can't resolve 'dialog-polyfill' in 'C:\Users\leo\vueprojectsrc\assets'
@ ./src/assets/npm__pt.js 346:318-344

[bojeil-google]

You can first npm install firebaseui --save to bring in all missing dependencies.

[leonardojobim]

Thanks. It fixed the issue.
But if I add npm__pt.js to .babelrc ignore list, it will work in develpment mode (npm run dev) but not in production (npm run build).
I removed it and so, the app worked in both modes. I am using webpack as module bundler.

Is there any reason to keep npm__pt.js in .babelrc ignore list ?

[bojeil-google]

No reason. You can remove it. In my setup it was giving some errors.

[bojeil-google]

We have updated the instructions on how to build the localized npm modules:
https://github.com/firebase/firebaseui-web#building-firebaseui