Subscribe on changes!

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

avatar
Oct 4th 2020

What problem does this feature solve?

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 a normal typescript project with Vue 2, we can do like above to access this.$fireStore. But when use Composition API, how I can inject the properties like this in the root on function setup(_, { root})? So I cant use with root.$fireStore...

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

What does the proposed API look like?

setup(_, { root}) {
 root.$xyz 
}
avatar
Oct 4th 2020

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.


See https://github.com/vuejs/rfcs/pull/117

avatar
Oct 5th 2020

@posva is there an official guideline for this question though (if no, this should be a feature request)?

As Evan stated in your linked code review: "There's no way to make this work in TS though. If users insist on using this with TS they'd have to shim the types themselves."

avatar
Oct 5th 2020

See how it is done on vue-router-next: https://github.com/vuejs/vue-router-next/blob/master/src/globalExtensions.ts

It's worth checking vuejs/docs-next repository for open issues about documenting this and open a new one if there is none to discuss and propose things