Vs Vue3 Select

Installation

Package manager

Install with package manager:

pnpm add vs-vue3-select

yarn add vs-vue3-select

npm install vs-vue3-select

Then, import and register the component:

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

Vue.component('v-select', vSelect)

import {Component, createApp} from 'vue'
import App from './App.vue'
import 'vs-vue3-select/dist/vs-vue3-select.css'
import vSelect, { 
    VSelectProps,
    VSelectEvents,
    VSelectSlots } from 'vs-vue3-select';

const app =  createApp(App)
app.component(
    'v-select', 
    vSelect as Component<VSelectProps, VSelectEvents, VSelectSlots>
);
app.mount('#app')

The component itself does not include any CSS. You'll need to include it separately:

import 'vs-vue3-select/dist/vs-vue3-select.css'

To use types in TypeScript projects, add "vs-vue3-select" to the "types" section in the tsconfig.json file:

{
  "compilerOptions": {
    "types": [
      "vs-vue3-select"
    ]
  }
}

In the Browser

vs-vue3-select ships as an UMD module that is accessible in the browser. When loaded in the browser, you can access the component through the VueSelect.VueSelect global variable. You'll need to load Vue.js, vs-vue3-select JS & vs-vue3-select CSS.

<!-- include VueJS first -->
<script src="https://unpkg.com/vue@latest"></script>

<!-- use the latest release -->
<script src="https://unpkg.com/vs-vue3-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vs-vue3-select@latest/dist/vs-vue3-select.css"/>

<!-- or point to a specific release -->
<script src="https://unpkg.com/vs-vue3-select@1.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vs-vue3-select@1.0.0/dist/vs-vue3-select.css"/>

And we use the component:

<body>
<div id="app">
    <v-select :options="options"></v-select>
</div>
<script>
    Vue.createApp({
        components: {
            vSelect: window["vs-vue3-select"]
        },
        data() {
            return {
                options: ["JavaScript", "PHP", "C++", "Java", "Assembler"]
            };
        }
    }).mount("#app");
</script>
</body>