I've got this error in console: Uncaught TypeError: _vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined.
main.js
import { createApp } from "vue";
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.use(BootstrapVue);
createApp(App)
.use(store)
.use(router)
.mount("#app");
Related
New to Vue, but trying to get v-select working. I'm getting vue is not defined when importing. Then when I import vue I'm getting a different error as listed below:
main.js
import { createApp } from 'vue'
import App from './App.vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
import 'vue-select/dist/vue-select.css';
createApp(App).mount('#app')
Error
-- 'Vue' is not defined
When adding import Vue from 'vue'
Cannot read properties of undefined (reading 'component')
Assuming you've installed the right version of v-select that's compatible with vue 3 you should use app.component(...) to register it not Vue.component(...) :
import { createApp } from 'vue'
import App from './App.vue'
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css';
const app=createApp(App)
app.component('v-select', vSelect)
app.mount('#app')
I am trying to use the bootstrap library in my Vue project, after having installed it as indicated in the bootstrap official page I do the imports in the main.js file and when I use Vue.use(BootstrapVue) my application stops working because Vue is undefined.
import Vue from 'vue'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue) //here is the problem
createApp(App).use(router).mount('#app')
I am trying to add Element UI into my Vue3 Project:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
App.use(ElementUI)
createApp(App).use(store).use(router).mount('#app')
So I am following this documentation https://element.eleme.io/#/en-US/component/quickstart but it gives me this error: types.js?a742:39 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
I dont know what I am doing wrong in this regard.
You should use element-plus which is compatible with vue 3:
Installation :
npm install element-plus --save
Usage :
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
The following code:
import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import axios from "axios";
import VueAxios from 'vue-axios';
import sweetalert from 'vue-sweetalert2'
window.URL='//127.0.0.1:8000/api/';
createApp(App)
.use(store)
.use(router)
.use(sweetalert)
.use(VueAxios, axios)
.mount("#app");
Gives me this error in vue cli:
Uncaught TypeError: vue.prototype is undefined
Why?
vue-sweetalert2 is not yet supporting Vue#3, as you can see here vue-sweetalert2 using Vue#2 that reason why you're seeing that error (vue.prototype is undefined) B'cause prototype is not available in Vue#3.
I have created a support issue here, you can keep track on this.
I've installed in vue js bootstrap vue, with the following command
yarn add bootstrap-vue bootstrap axios
Code:
ERROR Failed to compile with 1 errors 2:56:01 AM
error in ./src/main.js
Module Error (from ./node_modules/eslint-loader/index.js):
/home/ronin/Documents/V2/test/src/main.js
7:1 error 'Vue' is not defined no-undef
✖ 1 problem (1 error, 0 warnings)
# multi (webpack)-dev-server/client?http://192.168.0.161:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
If you wanted to use Vue.use() you needed to import Vue from 'vue'
Or import { createApp, use } from 'vue' and use use() function instead of Vue.use()
And you might needed to reconsider on import orders.
Eg:
import { createApp, use } from 'vue'
import App from './App.vue'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
use(BootstrapVue)
createApp(App).use(router).mount('#app')
Or you could import whole vue shown below
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.createApp(App).use(router).mount('#app')