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')
Related
I have a instance of createApp and use this in vuetify plugin.
main file
import { createApp } from 'vue'
import App from './App.vue'
export const app = createApp(App)
import '#/plugins/vuetify.ts'
vuetify plugin
import '#mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import {app} from '#/main.ts'
app.use(createVuetify())
error: "Uncaught ReferenceError: Cannot access 'app' before initialization at vuetify.ts:7:1"
Thank you in advance.
import statements are hoisted, putting other code above them gives false impression that it will be evaluated first.
main.ts and vuetify.ts contain circular dependency that cannot be resolved. In order to avoid this, app instance should be created in a separate module, app.ts, then it can be imported in both.
Nothing in vuetify.ts requires to execute use() inside this module. A common way is to install components where app is defined, i.e. in main entry point:
vuetify.ts
import '#mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
export { createVuetify } from 'vuetify'
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } '#/plugins/vuetify.ts'
export const app = createApp(App).use(createVuetify())
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')
Can someone tell me how can i use only bootstrap grid (from https://bootstrap-vue.org/) in vue project not other packages.
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'
createApp(App).use(router).use(BootstrapVue).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')
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')