How to handle types for injected properties in Vue Composition API - Typescript

Question

import firebase from 'firebase'
import Vue from 'vue'

/* This file simply imports the needed types from firebase and forwards them */
declare module 'vue/types/vue' {
  interface Vue {
    $fireStore: firebase.firestore.Firestore
    $fireDb: firebase.database.Database
    $fireFunc: firebase.functions.Functions
    $fireStorage: firebase.storage.Storage
    $fireAuth: firebase.auth.Auth
    $fireMess: firebase.messaging.Messaging
  }
}

In normal typescript project with Vue 2, we can do this. But when use Composition API, how I can inject the properties like this in root on function setup(_, { root})? So I cant use with root.$fireStore...

Now, I must use it with the any type like (root as any).$fireStore. So hope anyone can help my team. We are working on a project with Nuxt Composition now.

Answer 1

Yes, after a few days, I reached out the temporary solution for this. Just add a nuxt.d.ts or your types folder like this. So you can use $apolloHelpers in your Vue Instances and Middleware...

import { SetupContext } from '@vue/composition-api'

/**
 * @description Define type for $apolloHelpers --> copy from Apollo module --> inject Apollo Helpers
 * @docs https://github.com/nuxt-community/apollo-module/blob/master/lib/templates/plugin.js#L141
 */

declare module '@nuxt/types' {
  interface Context {
    $apolloHelpers: {
      onLogin(token, apolloClient, cookieAttributes, skipResetStore = false)
      onLogout(apolloClient, skipResetStore = false)
      getToken(tokenName?: string)
    }
  }

  interface NuxtAppOptions {
    $apolloHelpers: {
      onLogin(token, apolloClient, cookieAttributes, skipResetStore = false)
      onLogout(apolloClient, skipResetStore = false)
      getToken(tokenName?: string)
    }
  }
}

declare module 'vue/types/vue' {
  interface Vue {
    $apolloHelpers: {
      onLogin(token, apolloClient, cookieAttributes, skipResetStore = false)
      onLogout(apolloClient, skipResetStore = false)
      getToken(tokenName?: string)
    }
  }
}

Answer 2

it's kind of the same in vue 3 but not the same module

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $fireStore: firebase.firestore.Firestore
        $fireDb: firebase.database.Database
        $fireFunc: firebase.functions.Functions
        $fireStorage: firebase.storage.Storage
        $fireAuth: firebase.auth.Auth
        $fireMess: firebase.messaging.Messaging
    }
}

Answer 3

How about creating a composable for firebase?

import firebase from 'firebase'

export default function useFirebase() {
    return {
        fireStore: firebase.firestore.Firestore
        fireDb: firebase.database.Database
        fireFunc: firebase.functions.Functions
        fireStorage: firebase.storage.Storage
        fireAuth: firebase.auth.Auth
        fireMess: firebase.messaging.Messaging
    };
};

And then use it in your setup() of the component:

export default defineComponent({
    setup() {
        const {fireStore, fireDb, fireFunc, fireStorage, fireAuth, fireMess} = useFirebase();
    }
});

Answer 4

I don't know if it will help you, but there is root.$store.$fireAuth

Answer 5

insert @nuxt/types in your tsconfig.json and the types will work