{"id":28449,"library":"vue-pick","title":"Vue Pick","description":"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.","status":"active","version":"0.9.0","language":"javascript","source_language":"en","source_url":"https://github.com/syazwanz/vue-pick","tags":["javascript","vue","vue3","vue2","select","combobox","dropdown","accessible","a11y","typescript"],"install":[{"cmd":"npm install vue-pick","lang":"bash","label":"npm"},{"cmd":"yarn add vue-pick","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-pick","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: requires Vue 2.7 or Vue 3","package":"vue","optional":false}],"imports":[{"note":"Named export from the main module (Vue 3 by default). For Vue 2.7, import from 'vue-pick/vue2'.","wrong":"import VPickNative from 'vue-pick'; const VPickNative = require('vue-pick')","symbol":"VPickNative","correct":"import { VPickNative } from 'vue-pick'"},{"note":"Named export for the custom dropdown variant. Same dual-version import rule applies.","wrong":"import VPick from 'vue-pick'","symbol":"VPick","correct":"import { VPick } from 'vue-pick'"},{"note":"Side-effect import required for styles. Must be imported separately from components.","wrong":"import style from 'vue-pick/style.css'; require('vue-pick/style.css')","symbol":"style.css","correct":"import 'vue-pick/style.css'"}],"quickstart":{"code":"npm install vue-pick\n\n// main.ts or main.js\nimport 'vue-pick/style.css'\n\n// App.vue (Vue 3)\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VPickNative } from 'vue-pick'\n\ninterface Option {\n  label: string\n  value: string\n}\n\nconst selected = ref<string | null>(null)\nconst options: Option[] = [\n  { label: 'Todo', value: 'todo' },\n  { label: 'In Progress', value: 'in-progress' },\n  { label: 'Done', value: 'done' },\n]\n</script>\n\n<template>\n  <VPickNative v-model=\"selected\" :options=\"options\" placeholder=\"Select status\" />\n</template>","lang":"typescript","description":"Installation, style import, and usage of VPickNative with v-model for Vue 3 with TypeScript."},"warnings":[{"fix":"For Vue 2.7, use `import ... from 'vue-pick/vue2'` instead of 'vue-pick'.","message":"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.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Change `import VPick from 'vue-pick'` to `import { VPick } from 'vue-pick'`.","message":"The previous default export (e.g., import VPick from 'vue-pick') is deprecated. Use named exports instead.","severity":"deprecated","affected_versions":">=0.8.0"},{"fix":"Add `import 'vue-pick/style.css'` in your entry file or component.","message":"Styles must be imported separately. Forgetting to import 'vue-pick/style.css' results in unstyled components.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use `import { VPickNative } from 'vue-pick/vue2'` for both runtime and types.","message":"TypeScript users: when using Vue 2.7, import types from 'vue-pick/vue2' as well, otherwise types may not be resolved.","severity":"gotcha","affected_versions":">=0.9.0"},{"fix":"Upgrade Vue to ^2.7.0 or ^3.0.0.","message":"The component does not support Vue 2.6 or earlier. Ensure your project uses Vue 2.7.0+ or Vue 3.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"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'.","cause":"Missing dependency or incorrect import path for Vue 2.7.","error":"Cannot find module 'vue-pick' or its corresponding type declarations."},{"fix":"Add `import 'vue-pick/style.css'` in your main.js or main.ts file.","cause":"The style file is not automatically imported; it must be explicitly imported.","error":"Module not found: Error: Can't resolve 'vue-pick/style.css'"},{"fix":"Pass a valid array of objects with `label` and `value` properties to the `options` prop.","cause":"Using the component with v-model but without providing the options prop correctly (e.g., missing or empty array).","error":"TypeError: Cannot read properties of undefined (reading 'label')"},{"fix":"Use named import: `import { VPickNative } from 'vue-pick'` and register it locally or globally.","cause":"Component not imported or registered correctly, likely due to using default import instead of named import.","error":"Failed to resolve component: VPickNative"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}