Vs Vue3 Select

Установка

Менеджер пакетов

Установка компонента:

pnpm add vs-vue3-select

yarn add vs-vue3-select

npm install vs-vue3-select

После установки импортируем и регистрируем:

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

Сам компонент не включает CSS стилей. Их необходимо подключать отдельно:

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

Для использования типов в TypeScript проекте, добавьте "vs-vue3-select" в раздел "types" в файле tsconfig.json:

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

В браузере

vs-vue3-select поставляется в качестве модуля UMD, доступного в браузере. При загрузке в браузере вы можете получить доступ к компоненту через глобальную переменную VueSelect.VueSelect. Вам необходимо будет загрузить Vue.js, vs-vue3-select JS и vs-vue3-select CSS.

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

<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"/>

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

<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"/>

И используем компонент:

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