I can not do Vue Select component for Vue cli installation work

Question

I have install Vue Select component on my Vue cli application but the select behaviour is like a normal v-select. I had installed using its official documentation. https://vue-select.org/

Here is the installation

npm install vue-select

Then, import and register the component:

import Vue from 'vue'
import vSelect from 'vue-select'

Vue.component('v-select', vSelect)
The component itself does not include any CSS. You'll need to include it separately:

import 'vue-select/dist/vue-select.css';
Alternatively, you can import the scss for complete control of the component styles:

@import "vue-select/src/scss/vue-select.scss";

Here is my main.js

import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
import vSelect from "vue-select";
 
Vue.component("v-select", vSelect);
import 'vue-select/dist/vue-select.css';
import "vue-select/src/scss/vue-select.scss";

import '@/components';
import '@/assets/scss/main.scss';

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')
enter code here

Here is how I use the component

<v-select :options="['Canada', 'United States']"></v-select>

but my v-select is the basic select for vue and vuetify, even, no items are load.

I really appreciate your help it is my first reactive application so, many things are great and different to traditional html, js, css proyects.

Answer 1

There is no :options for v-select props. You must use ":items".

<v-select :items="['Canada', 'United States']"></v-select>

https://vuetifyjs.com/en/api/v-select/#props

See the examples and API.

As long as you need to learn something, you must read official document first.