Installation

Install the package

npm

npm install vue-pick

pnpm

pnpm add vue-pick

yarn

yarn add vue-pick

Import the stylesheet

Import the base CSS once in your app entry. The component will not render correctly without it.

main.ts (Vue 3)

import { createApp } from "vue"
import App from "./App.vue"
import "vue-pick/style.css"

createApp(App).mount("#app")

main.ts (Vue 2)

import Vue from "vue"
import App from "./App.vue"
import "vue-pick/style.css"

new Vue({ render: (h) => h(App) }).$mount("#app")

Vue 2.7 vs Vue 3 imports

Both components are available from separate entry points. The API is identical — only the import path changes.

// Vue 3
import { VPickNative, VPick } from "vue-pick"

// Vue 2.7
import { VPickNative } from "vue-pick/vue2"

TIP

VPick is Vue 3 only in the current release. Use VPickNative for Vue 2.7 projects.

Other CSS import strategies

You can also import the stylesheet from a central CSS file or directly inside a component:

/* main.css */
@import "vue-pick/style.css";

<!-- SomeComponent.vue -->
<script setup>
import { VPickNative } from "vue-pick"
import "vue-pick/style.css"
</script>