vue.jsvuejs3vue-composition-apiv-select

Trying to install v-select getting Vue is not defined


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')


Solution

  • 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')