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')
Related
I am developing an application in Express and Vue js
I'm getting this:
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=460a75c2' does not provide an export named 'Vue' (at main.js?t=1667997788986:1:9)
App.vue file :
import {Vue, createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import axios from 'axios'
import vueAxios from 'vue-axios'
Vue.use(axios, vueAxios)
createApp(App).mount('#app')
My main.js file is :
<script>
export default {
data(){
return{
dataResponse: [],
}
},
methods: {
async getDataResponse(){
const res = await axios.get(`${this.baseUrl}/catalog/home`)
console.log(response)
}
},
created(){
this.getDataResponse()
}
}
</script>
<template>
<h1>Welcome</h1>
</template>
You didn't write which version of Vue you are using, but based on the fact that you are using createApp it looks like you are using Vue 3.
In that case, the error is correct -- there is no export called Vue in the module vue. Vue 3 removed the default export, so you can't write import Vue from 'vue' anymore, and there is no export named Vue in the package, so import { Vue } from 'vue' is not valid either.
You're probably trying to follow an old tutorial about installing Vue plugins. In Vue 3, instead of writing Vue.use(plugin), you would write createApp().use(plugin) instead.
If your are using Vue 2.7 and 3.x, do you mind if try import { createApp } from 'vue', and then use createApp(App).use(axios).use(vueAxios).mount('#app')? It should be works because of import nature.
Another alternative:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import axios from 'axios'
import vueAxios from 'vue-axios'
const app = createApp(App)
app.use(axios)
app.use(vueAxios)
app.mount('#app')
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())
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')
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')