Use injected variables (nuxt.firebase) in composition api

Question

I'm using the composi api in my Vue project and the nuxt.js firebase module, I would like to call variables injected into modules, such as $ fireAuth, but I didn't find a solution.

Below is a small code training of how I would like it to work:

export default createComponent({
  setup(_props, { root }) {
   root.$fireAuth= ..
  }
}

// or

export default createComponent({
  setup(_props, { root , $fireAuth }) {
  
  }
}

Answer 1

I have a work-around for this and it works! (For now.)

1. Create a dummy component (ex. AppFirebase.vue)

<template></template>

<script lang="ts">
    import Vue from "vue";

    export default Vue.extend({
        created() {
            this.$emit("init", this.$fire);
        },
   });
</script>

2. Accessing NuxtFireInstance (ex. SomeComponent.vue)

<template>
    <fire @init="initFB"></fire>
</template>

<script lang="ts">
import {
    defineComponent,
    reactive,
} from "@nuxtjs/composition-api";
import fire from "@/components/AppFirebase.vue";

export default defineComponent({
    components: { fire },
    setup() {
        let _fire: any = reactive({});

        const initFB = (fire: any) => {
            _fire = fire;
        };

        const signout = async () => {
            try {
                await _fire.auth.signOut().then(() => {
                    // do something
                });
            } catch (error) {
                console.log(error);
            }
        };

        return {
            initFB,
            _fire,
            signout,
        };
    },
});
</script>

3. Rickroll if you got it working!