You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

vue3-select-component

Package Overview
Dependencies
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-select-component

A flexible & modern select-input control for Vue 3.

0.2.4
Source
npmnpm
Version published
Weekly downloads
3.5K
3.39%
Maintainers
1
Weekly downloads
 
Created
Source

Vue3-Select-Component

Vue3 Select Component

npm package npm package CI status

Docs & demos: vue3-select-component.vercel.app

Best-in-class select component for Vue 3, with a focus on DX, accessibility and ease-of-use.

  • ⚙️ Data manipulation with v-model
  • 🔑 Type-safe
  • 🎨 Great styling out-of-the-box, customization with CSS variables & Vue :deep
  • ✅ Single & multi-select
  • 🖌️ Customization with <slot>s
  • 🪄 Teleport/portal menu
  • 📦 Extremely light (3.1kb gzip)

Installation

Install the package with npm:

npm i vue3-select-component

Use it in your Vue 3 app:

<script setup lang="ts">
import { ref } from "vue";
import VueSelect from "vue3-select-component";

import "vue3-select-component/dist/style.css";

const option = ref("");
</script>

<template>
  <div class="my-app">
    <VueSelect
      v-model="option"
      :options="[
        { label: 'A Wizard of Earthsea', value: 'wizard_earthsea' },
        { label: 'Harry Potter and the Philosopher\'s Stone', value: 'harry_potter' },
        { label: 'The Lord of the Rings', value: 'the_lord_of_the_rings' },
      ]"
    />
  </div>
</template>

Advanced TypeScript usage

Vue 3 Select Component creates a type-safe relationship between the option.value and the v-model prop.

It also leverages the power of generics to provide types for additional properties on the options.

<script setup lang="ts">
import { ref } from "vue";
import VueSelect, { type Option } from "vue3-select-component";

import "vue3-select-component/dist/style.css";

type UserOption = Option<number> & { username: string };

const selectedUser = ref<number>();

const userOptions: UserOption[] = [
  { label: "Alice", value: 1, username: "alice15" },
  { label: "Bob", value: 2, username: "bob01" },
  { label: "Charlie", value: 3, username: "charlie20" },
];
</script>

<template>
  <VueSelect
    v-model="selectedUser"
    :options="userOptions"
    :get-option-label="(option) => `${option.label} (${option.username})`"
    placeholder="Pick a user"
  />
</template>

License

MIT Licensed. Copyright (c) Thomas Cazade 2024 - present.

Keywords

vue3

FAQs

Package last updated on 16 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts