Vue Pick

0.9.0 verified Sat May 09 auth: no javascript

Accessible select components for Vue 2.7 and Vue 3, from one codebase. Current stable version 0.9.0. Released regularly via npm. Key differentiators: supports both Vue 2.7 and Vue 3 with the same API, ships TypeScript types, full keyboard navigation and ARIA support, CSS custom properties for theming, zero runtime dependencies. Unlike many alternative select libraries, it provides a native `<select>` wrapper and a custom dropdown, making it suitable for a11y-conscious projects.

Common errors

error Cannot find module 'vue-pick' or its corresponding type declarations. ↓

cause Missing dependency or incorrect import path for Vue 2.7.

fix

Run npm install vue-pick@latest and ensure you are using the correct import: for Vue 3 use 'vue-pick', for Vue 2.7 use 'vue-pick/vue2'.

error Module not found: Error: Can't resolve 'vue-pick/style.css' ↓

cause The style file is not automatically imported; it must be explicitly imported.

fix

Add import 'vue-pick/style.css' in your main.js or main.ts file.

error TypeError: Cannot read properties of undefined (reading 'label') ↓

cause Using the component with v-model but without providing the options prop correctly (e.g., missing or empty array).

fix

Pass a valid array of objects with label and value properties to the options prop.

error Failed to resolve component: VPickNative ↓

cause Component not imported or registered correctly, likely due to using default import instead of named import.

fix

Use named import: import { VPickNative } from 'vue-pick' and register it locally or globally.

Warnings

breaking In version 0.9.0, the import path for Vue 2.7 changed from 'vue-pick' to 'vue-pick/vue2'. Previous versions may have used a different entry point. ↓

fix For Vue 2.7, use `import ... from 'vue-pick/vue2'` instead of 'vue-pick'.

deprecated The previous default export (e.g., import VPick from 'vue-pick') is deprecated. Use named exports instead. ↓

fix Change `import VPick from 'vue-pick'` to `import { VPick } from 'vue-pick'`.

gotcha Styles must be imported separately. Forgetting to import 'vue-pick/style.css' results in unstyled components. ↓

fix Add `import 'vue-pick/style.css'` in your entry file or component.

gotcha TypeScript users: when using Vue 2.7, import types from 'vue-pick/vue2' as well, otherwise types may not be resolved. ↓

fix Use `import { VPickNative } from 'vue-pick/vue2'` for both runtime and types.

gotcha The component does not support Vue 2.6 or earlier. Ensure your project uses Vue 2.7.0+ or Vue 3. ↓

fix Upgrade Vue to ^2.7.0 or ^3.0.0.

Install

npm install vue-pick

yarn add vue-pick

pnpm add vue-pick

Imports

VPickNative

wrong

import VPickNative from 'vue-pick'; const VPickNative = require('vue-pick')

correct

import { VPickNative } from 'vue-pick'

Named export from the main module (Vue 3 by default). For Vue 2.7, import from 'vue-pick/vue2'.

VPick
wrong
```
import VPick from 'vue-pick'
```
correct
```
import { VPick } from 'vue-pick'
```
Named export for the custom dropdown variant. Same dual-version import rule applies.
style.css
wrong
```
import style from 'vue-pick/style.css'; require('vue-pick/style.css')
```
correct
```
import 'vue-pick/style.css'
```
Side-effect import required for styles. Must be imported separately from components.

Quickstart

Installation, style import, and usage of VPickNative with v-model for Vue 3 with TypeScript.

npm install vue-pick

// main.ts or main.js
import 'vue-pick/style.css'

// App.vue (Vue 3)
<script setup lang="ts">
import { ref } from 'vue'
import { VPickNative } from 'vue-pick'

interface Option {
  label: string
  value: string
}

const selected = ref<string | null>(null)
const options: Option[] = [
  { label: 'Todo', value: 'todo' },
  { label: 'In Progress', value: 'in-progress' },
  { label: 'Done', value: 'done' },
]
</script>

<template>
  <VPickNative v-model="selected" :options="options" placeholder="Select status" />
</template>