Vuefire encountering an issue with Vue 3 and throwing a Vue.use error

After setting up a Vue app and importing Vue from the vue module, I encountered an issue:

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 |

This project is built with typescript using @vue/cli. The goal is to integrate firestorePlugin from vuefire into the application.

The framework being used is Vue3. Below is the excerpt of the source code:

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

The exact cause of this error remains uncertain at this point.

javascripttypescriptvue.jsvuejs3vuefire

Answer №1

Vuefire is not yet compatible with Vue 3. As stated on their main page:

Note: The current version only works with Vue 2 and Firebase 7. Compatibility for Vue 3 / Composition API and Firebase 8 is currently in progress.

Vue.use is the method used in Vue 2 to install plugins. When Vuefire adds support for Vue 3, you will need to use app.use instead of Vue.use. In Vue 3, exporting Vue from the "vue" package is no longer valid:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Evaluating the Material ui Select element without relying on test identifiers

Currently, I am working with Material UI and react-testing-library to test a form. The form includes a Select component that is populated by an array of objects. import React, { useState } from 'react'; import { Select, MenuItem, FormControl, Inp ...

javascriptreactjsmaterial-uireact-testing-library

You won't find the command you seek within the confines of "tsc."

Whenever I type tsc into the terminal (regardless of location), I am met with the following message: $ npx tsc --version This is not the tsc command you are looking for In order to access the TypeScript compiler, tsc, from the command li ...

typescriptnpmtsc

Optimizing NodeJS for scheduling and sending bulk text messages based on MongoDB data

I am currently developing an application that relies on MongoDB database entries to send text messages through AWS. The information stored in the database includes the message content, phone number, and scheduled time for sending the message. As of now, ...

javascriptnode.jsmongodbexpress

The AngularJS HTTP interceptor is a crucial component for handling

Is there a way to use an interceptor in AngularJS to log "finished AJAX request" when any request is completed? I've been exploring interceptors and currently have the following setup, but it triggers at the beginning of the request rather than the e ...

javascriptangularjs

Using data-image as the source for Bootstrap Modal

I am currently working on an image gallery that utilizes the Paver jQuery plugin. The gallery is functional, but I am facing an issue where it displays the same image in the modal instead of showing the respective data-image for each image. My goal is to ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having difficulty in displaying database values in HTML modal using PHP

On my PHP page, I have a setup that displays data based on the fetched id from the URL. Everything is working smoothly, but when I click a button to show a modal with additional information, the modal appears blank. Here is the code snippet I am using: ...

javascriptphphtmlmysqlsql

Instructions on adjusting the image size within a MUI Card

import { Card, CardActionArea, CardContent, CardMedia, Typography, } from "@mui/material"; import React from "react"; import { styled } from "@mui/material/styles"; const CardImage = styled("div")(({ theme ...

javascriptreactjsmaterial-uiresponsivecard

Achieving success in element-ui vuejs involves validating the state with the :error parameter

I recently developed an app using Laravel, Vuejs, and Element-ui. Within my form, I have utilized the "error" property to indicate that Laravel validation is in place. <el-form-item label="First Name" prop="firstname" :error="registerForm.errors.get(&a ...

javascriptlaravelvue.jsvuejs2element-ui

Create and adapt dynamic tiles to fit within the available width

I am looking to create a dynamic tile (div) that adjusts based on the number of users available, similar to how it works in Microsoft Teams meetings. For example, if there is only one user, the div should occupy the full screen. When there are two users ...

javascriptcssbootstrap-4flexboxresponsive-design

Using Angular JS, the JSON method is invoked from a location external to the controller

How can I call an inner method from outside a controller in AngularJS? var app; (function (){ app = angular.module("gallery", []); app.controller("galleryController", ['$scope','$http', function($scope, $http){ var gallery = this; ...

javascriptjsonangularjs

What strategies can I implement to integrate Cordova with a combination of Meteor and React?

I'm currently struggling to implement a Cordova plugin with Meteor and React. According to the documentation: You should wrap any functionality that relies on a Cordova plugin inside a Meteor.startup() block to ensure that the plugin has been fully ...

javascriptcordovareactjsmeteor

What is the connection between @types, TypeScript, and Webpack?

When using an exported type in a .ts file, it is necessary to import it: import {jQuery} from 'jQuery' Even after adding the import, intellisense may not work until npm install @types\jQuery is executed. If @types are installed, intellis ...

node.jstypescriptwebpacktypescript-typings

Anticipating the arrival of the requested data while utilizing Ajax sending

Greetings, I'm currently utilizing JavaScript to send a request and receive a response from the server. xxmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); myotherMethod(); I am looking for a way to ensure that the next set of instructions ar ...

javascriptjqueryhtmlajax

Ensuring that a date is in the past using VeeValidate

Hey there! I'm working on validating a date of birth field in Vue.js to only allow dates prior to today. However, I'm a bit unsure about how to leverage the before and date_between attributes. The code snippet below shows what I'm trying to ...

vue.jsvee-validate

Determine the dropdown list value by analyzing the final two variables in a textfield

In my textfield, car registration numbers are meant to be entered. These registrations are based on years in the format GT 74454 12, with the last two digits "12" representing the year 2012. I am looking for a script that can automatically detect the last ...

javascriptjqueryhtml

Ways to access the files attribute in an input tag in AngularJS without relying on getElementById

I am currently working on file uploads using AngularJS and I have a question regarding how to retrieve input files similar to regular JS. What I want to achieve: HTML: <input type="file" name="file" id="fileImg" accept="image/*"> JS: var file ...

javascripthtmlangularjsfile-uploadng-file-upload

Mongoose retrieves the entire document, rather than just a portion of it

I'm currently experiencing an issue with my mongoose query callback from MongoDB. Instead of returning just a specific portion of the document, the code I'm using is returning the entire document. I have verified that in the database, the 'p ...

javascriptnode.jsmongodbmongoose

Detecting when the "enter" key is pressed using Jquery instead of relying on a mouse click

One issue I am facing is that jQuery is detecting the "enter" key press instead of mouse clicking on the submit button when trying to submit a form. The submit button works fine on the first attempt, but after that it only responds to the "enter" key. He ...

javascriptphpjqueryforms

Creating a dynamic select functionality in Drupal forms

Being more focused on backend development, I am facing a challenge that may be simple for jQuery experts. In Drupal, I have two arrays - one containing names of views and the other having displays for each view. To populate these arrays, here is the code s ...

javascriptphpjquerydrupalform-api

"Bower fetches and installs specific versions of packages from the repository

I'm currently using npm 3.3.6 and bower 1.6.8 on Windows 10. Whenever I attempt to install a package like jquery or framework7, it ends up downloading and installing an archived version of the package. Here's an example: > bower install jquer ...

javascriptnode.jsnpmbower