FirebaseUI web as Vuejs component

[comteharbour]

When using firebaseUI within a quasar app, the styling is broken. I suspect that the styling is overwritten by quasar, since it works when used in a normal Vuejs app.

Since Quasar doesn't affect styling on Vue components, it would be great to be able to use firebaseUI as a Vue component, where the configuration object would be passed as a prop. I imagine something used like that:

<template>
  <my-page>
    ...
    <vue-firebase-ui :uiConfig="uiConfig" />
  </my-page>
</template>

<script>
import vueFirebaseUi from 'vue-firebaseui'

export default {
  data () {
    uiConfig: {
      signInSuccessUrl: '<url-to-redirect-to-on-success>',
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
        firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
      ],
      tosUrl: '<your-tos-url>',
      privacyPolicyUrl: function() {
        window.location.assign('<your-privacy-policy-url>')
      }
    }
  },
  components: { vueFirebaseUi }
}
</script> 

It may be possible to copy-paste the css styling directly from github and to use it as unscoped styling for the div with the #firebaseui-auth-container id. But it's ugly and I couldn't make it work.

This is what I get now with a basic setup:

[fidelix]

You need to import the firebaseui CSS properly.

How about

<style lang="scss"> @import "~firebaseui/dist/firebaseui.css"; </style>

[ajain-1]

The problem isn't quasar styling. You have to import the css file to get styling for the auth component.

<script>
import "firebaseui/dist/firebaseui.css";
....
</script>