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

[harrytran998]

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 
}

[posva]

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

[ux-engineer]

@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."

[posva]

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