vue-pick

library0.9.0jsnpmunverified

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.

web-framework

npm install vue-pick

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-PICK

vue-pick

web-frameworkjavascriptv0.9.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VPickNative

✓ import { VPickNative } from 'vue-pick'

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

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

VPick

✓ import { VPick } from 'vue-pick'

✗ import VPick from 'vue-pick'

Named export for the custom dropdown variant. Same dual-version import rule applies.

style.css

✓ import 'vue-pick/style.css'

✗ import style from 'vue-pick/style.css'; require('vue-pick/style.css')

Side-effect import required for styles. Must be imported separately from components.

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>

Debug

Known issues

breakingIn 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'.

affects: >=0.9.0

deprecatedThe 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'`.

affects: >=0.8.0

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

affects: >=0.1.0

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

affects: >=0.9.0

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

affects: >=0.1.0

Errors

Common errors & fixes

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

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

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

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.

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

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.

Failed to resolve component: VPickNative

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.

Upgrade

Version history

0.9.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency: requires Vue 2.7 or Vue 3

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/syazwanz/vue-pick ↗

packagehttps://www.npmjs.com/package/vue-pick ↗

homepagehttps://vue-pick.js.org ↗