fix: compatibility with Vue 2

Fix #1280

Author: posva

docs/guide/getting-started.md

@@ -79,15 +79,14 @@ import App from './App.vue'
 import { firebaseApp } from './firebase'
 
 const app = createApp(App)
-app
-  .use(VueFire, {
-    // imported above but could also just be created here
-    firebaseApp,
-    modules: [
-      // we will see other modules later on
-      VueFireAuth(),
-    ],
-  })
+app.use(VueFire, {
+  // imported above but could also just be created here
+  firebaseApp,
+  modules: [
+    // we will see other modules later on
+    VueFireAuth(),
+  ],
+})
 
 app.mount('#app')
 ```
@@ -102,12 +101,26 @@ const db = useFirestore()
 </script>
 
 <template>
-  <div>
-    ...
-  </div>
+  <div>...</div>
 </template>
 ```
 
+#### Vue 2
+
+VueFire only supports Vue 2.7 and it also requires you to use `createApp()` from `vue-demi` to keep the API the same in both versions, Vue 2 and Vue 3. Here is the same example as above but simplified for Vue 2:
+
+```ts{1}
+import { createApp } from 'vue-demi'
+import { VueFire } from 'vuefire'
+import App from './App.vue'
+// the file we created above with `database`, `firestore` and other exports
+import { firebaseApp } from './firebase'
+
+const app = createApp(App)
+app.use(VueFire, { firebaseApp })
+app.mount('#app')
+```
+
 ### Composition API
 
 VueFire exposes a few [composables](https://vuejs.org/guide/reusability/composables.html#composables) to create reactive variables from Firebase references.
@@ -129,7 +142,7 @@ const todos = useDatabaseList(dbRef(db, 'todos'))
 <template>
   <ul>
     <li v-for="todo in todos" :key="todo.id">
-     <span>{{ todo.text }}</span>
+      <span>{{ todo.text }}</span>
     </li>
   </ul>
 </template>
@@ -146,7 +159,7 @@ const todos = useCollection(collection(db, 'todos'))
 <template>
   <ul>
     <li v-for="todo in todos" :key="todo.id">
-     <span>{{ todo.text }}</span>
+      <span>{{ todo.text }}</span>
     </li>
   </ul>
 </template>

src/index.ts

@@ -125,7 +125,14 @@ export interface VueFireOptions {
    * Array of VueFire modules that should be added to the application. e.g. `[VueFireAuth, VueFireDatabase]`. Remember
    * to import them from `vuefire`.
    */
-  modules?: Array<(firebaseApp: FirebaseApp, app: App) => void>
+  modules?: VueFireModule[]
+}
+
+/**
+ * A VueFire module that can be passed to the VueFire Vue plugin in the `modules` option.
+ */
+export interface VueFireModule {
+  (firebaseApp: FirebaseApp, app: App): void
 }
 
 /**
@@ -138,6 +145,9 @@ export function VueFire(
   app.provide(_FirebaseAppInjectionKey, firebaseApp)
 
   for (const firebaseModule of modules) {
-    app.use(firebaseModule.bind(null, firebaseApp))
+    firebaseModule(firebaseApp, app)
+    // NOTE: we cannot use the following because it doesn't work on Vue 2
+    // the version above works since we are just using app.provide and vue-demi adds it
+    // app.use(firebaseModule.bind(null, firebaseApp))
   }
 }

src/shared.ts

@@ -6,7 +6,7 @@ import type {
   Query as FirestoreQuery,
 } from 'firebase/firestore'
 import { StorageReference } from 'firebase/storage'
-import { getCurrentInstance, inject, ssrContextKey } from 'vue-demi'
+import { getCurrentInstance, inject, isVue2 } from 'vue-demi'
 import type { Ref, ShallowRef } from 'vue-demi'
 
 export const noop = () => {}
@@ -267,13 +267,24 @@ export interface _ResolveRejectFn {
   (value: unknown): void
 }
 
+// NOTE: copied from vue core, avoids importing it since it only exists in Vue 3
+const ssrContextKey = Symbol.for('v-scx')
+
 /**
  * Check if we are in an SSR environment within a composable. Used to force `options.once` to `true`.
  *
  * @internal
  */
 export function useIsSSR(): boolean {
-  return !!(getCurrentInstance() && inject(ssrContextKey, null))
+  const instance = getCurrentInstance()
+  if (isVue2) {
+    return (
+      !!instance &&
+      // @ts-expect-error: Vue 2 only API
+      instance.proxy.$isServer
+    )
+  }
+  return !!inject(ssrContextKey, 0)
 }
 
 /**