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
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");
Related
i am trying to implement cubejs with a vue 5.0.6 project. i have read in places that it is only compatible with vue2. as soon as i install it into my vue5.0.6 project it gives error "createElement is not a function" which is originated from the code createApp(App) in main.js file.
i need to know if its compatible or not. if it is, what am i doing wrong.
i have tried using h instead of createApp as well.
import { h } from 'vue'
import App from './App.vue'
// import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import "bootstrap/dist/css/bootstrap.min.css"
// import Chart from 'chart.js'
loadFonts()
h(App)
// .use(vuetify)
// .use(Chart)
.mount('#app')
the above code gives error ".mount is not a function"
need instant help
Hi i have a situation something like this
I have 2 files
main.js
utils.js
main.js
import { createApp } from 'vue'
import Utils from "./utils.js"
import router from "...."
import VueCookies from 'vue-cookies'
const app = createApp(App);
app.use(router);
app.use(VueCookies)
app.use(Toast,Utils.toastConfig())
app.mount('#app')
utils.js
import Vue from 'vue'
export default{
setCookie(params){
Vue.$cookies.set(params.name, params.value)
}
...
// so on related to Vue.$cookies
}
Note: above file usage is in multiple places, changing everywhere is not feasible now as we are migrated from vue2 to vue3
Question: Vue is undefined in utils.js how to make it work without much code changes
I don't know how to solve this problem.
When I started project vue3.js , console show me this error.
This import in pinia store.
I tryied change first line with import to
"import Vue from 'vue';" (without curcy braces), but error don't disappear.
import { Vue } from 'vue';
import { defineStore } from 'pinia';
import moment from 'moment';
import _ from 'lodash';
import router from '#/router';
if you are using latest version of vue , vue3
this code
import { Vue } from 'vue';
is no longer global instance
I recently ran an npm update on my Vue/Laravel app just to upgrade my version of Bulma. Of course, this brought up a dozen vulnerabilities which I decided to fix, and of course this screwed up my whole app, mainly thanks to Webpack and Mix issues. I finally got it everything to compile again with only a few SASS warnings, but when I run the app I get the following error:
Uncaught TypeError: Vue.use is not a function
Google seems to suggest this is a problem when upgrading to Vue 3, however I am still on Vue 2 (2.6). Here's my app.js:
require('./bootstrap');
import VueRouter from 'vue-router';
import router from './router/routes';
import VueConfirmDialog from 'vue-confirm-dialog'
import SkeletonBox from './components/shared/SkeletonBox.vue'
import ValidationErrors from './components/shared/ValidationErrorComponent.vue'
import Vuex from 'vuex';
import storeDefinition from './store'
import Index from './Index'
window.Vue = require('vue');
Vue.use(VueConfirmDialog);
// init the Router
Vue.use(VueRouter);
// Init the Vuex store
Vue.use(Vuex);
const store = new Vuex.Store(storeDefinition);
Vue.component("skeleton-box", SkeletonBox)
Vue.component("v-errors", ValidationErrors)
const app = new Vue({
el: '#app',
router,
store,
publicPath: './',
components:{
"index": Index
},
beforeCreate(){
// call loadStoredState action in store.js
this.$store.dispatch('loadStoredState');
}
});
I have absolutely no idea what I need to do to get this working - can anyone help?
I try using Vue 3, but I look can't using Vue.use(exampleplugin) again.
I using command vue add bootstrap-vue after generate vue create project. And on plugin bootstrap-vue warning with code:
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
Output warning terminal:
warning in ./src/plugins/bootstrap-vue.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./node_modules/bootstrap-vue/esm/utils/vue.js
"export 'default' (imported as 'Vue') was not found in 'vue'
What's wrong with that? And how do I use vue 3 to add plugin bootstrap-vue?
Bootstrap Vue is not yet ready for Vue 3.
To answer part of your question, Vue 3 changes the method for instantiating the application instance, including how plugins are registered.
For example...
import { createApp } from 'vue';
import Router from './router/Router';
createApp({/* options */}})
.use(Router)
.mount('#app');
You can read more about this at the official docs.
https://v3.vuejs.org/guide/instance.html
https://v3-migration.vuejs.org
For vue 3 you can use
bootstrap-vue-3
Install: npm i bootstrap-vue-3
Config:
import { createApp } from "vue";
import App from "./App.vue";
import BootstrapVue3 from "bootstrap-vue-3";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue-3/dist/bootstrap-vue-3.css";
const app = createApp(App);
app.use(BootstrapVue3);
app.mount("#app");