Vuefire with Vue 3 throwing Vue.use error

Question

So I created a vue app and imported Vue from vue module but I am getting this error

ERROR in src/main.ts:4:5
TS2339: Property 'use' does not exist on type 'typeof import("/data/data/com.termux/files/home/ishankbg.tech/node_modules/vue/dist/vue")'.
    2 | import App from './App.vue'
    3 | import { firestorePlugin } from 'vuefire';
  > 4 | Vue.use(firestorePlugin);
      |     ^^^
    5 | createApp(App).mount('#app');
    6 |

I am using typescript in my vue app. I generated the project using @vue/cli. I want to use firestorePlugin from vuefire.

I am using Vue3 Here is the source code

import Vue, { createApp } from 'vue'
import App from './App.vue'
import { firestorePlugin } from 'vuefire';
Vue.use(firestorePlugin);
createApp(App).mount('#app');

I am not sure what's causing this error

Answer 1

Vuefire isn't supported in Vue 3 yet. From the main page:

Note: This version currently supports Vue 2 and Firebase 7. Support for Vue 3 / Composition API and Firebase 8 is on the way.

Vue.use is the Vue 2 way of installing plugins. Once Vuefire supports Vue 3, use app.use instead of Vue.use. In Vue 3, Vue is not a valid export from the "vue" package:

import { createApp } from 'vue'
import App from './App.vue'
import { firestorePlugin } from 'vuefire';

const app = createApp(App);
app.use(firestorePlugin);
app.mount("#app");