vue-firebaseui-localized

Vue wrapper over firebaseui with simpler localization. Conceptual port of react-firebaseui-localized to vue.

Instead of building all languages etc, the javascript bundles are fetched from the official cdn.

Installation

npm i vue-firebaseui-localized firebase firebaseui

or

yarn add vue-firebaseui-localized firebase firebaseui

Usage

Put this code where you want Firebase UI to be located:

<script setup>
import VueFirebaseuiLocalized from "vue-firebaseui-localized";
import firebase from "firebase/compat/app";
import * as firebaseui from "firebaseui";
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const app = initializeApp({
  apiKey: "your-unique-api-key-here",
});
const auth = getAuth(app);

const config = {
  signInSuccessUrl: "/",
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  ],
};
</script>

<template>
  <VueFirebaseuiLocalized
    version="6.0.1"
    lang="sv"
    :config="config"
    :firebase="firebase"
    :auth="auth"
  />
</template>

Props

| prop | required | notes | |----------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------| | config | true | Your configuration options for Firebase UI, see referece https://github.com/firebase/firebaseui-web#configuration | | version | true | The firebase ui version you are using. NOTE: Must be the same version as your package.json version | | lang | true | The language you want to use, for supported languages and their codes, look here: https://github.com/firebase/firebaseui-web/blob/master/LANGUAGES.md | | firebase | true | Pass in firebase that you have imported from firebase/compat/app | | auth | true | Pass in your auth object that you get from getAuth(app) | | rtl | false | Set to true if you're using a right-to-left language |

Slots

| slot | notes | |---------|------------------------------------------------------------------| | loading | Message or content to show while loading the javascript from cdn | | error | Message or content to show if loading Firebase UI fails |

Events

| event | arguments | notes | |--------|-----------|------------------------------------------------------------| | loaded | | Firebase UI is loaded | | error | Error | Couldn't load Firebase UI, the error is passed as argument |