{"id":14262,"library":"vue-3-better-picker","title":"Vue 3 Mobile Picker Component","description":"vue-3-better-picker is a mobile-first picker component designed specifically for Vue 3 applications. It is a maintained fork of the popular `openfe-openfe/vue-better-picker` library, adapted to leverage Vue 3's composition API and reactivity system. Currently at version 3.0.4, this package provides a clean and responsive UI for selecting values, typically seen in mobile environments. The library aims for stability and compatibility with modern Vue development practices, including `<script setup>`. While the original library supports Vue 2, `vue-3-better-picker` explicitly targets Vue 3, offering a dedicated branch for Vue 2 users. Its primary differentiator is its focus on a smooth mobile experience and robust integration into the Vue 3 ecosystem, making it a suitable choice for projects requiring interactive data selection on touch devices. Release cadence appears to be driven by maintenance and bug fixes for the Vue 3 specific implementation.","status":"active","version":"3.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/s-sasaki-0529/vue-better-picker","tags":["javascript","vue","picker"],"install":[{"cmd":"npm install vue-3-better-picker","lang":"bash","label":"npm"},{"cmd":"yarn add vue-3-better-picker","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-3-better-picker","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for Vue 3 component functionality.","package":"vue","optional":false}],"imports":[{"note":"Primarily designed for ESM environments with Vue 3's module system. CommonJS `require` is not the recommended or typical usage pattern for Vue components.","wrong":"const BetterPicker = require('vue-3-better-picker');","symbol":"BetterPicker","correct":"import BetterPicker from 'vue-3-better-picker';"},{"note":"Often used alongside BetterPicker for managing component state (e.g., picker visibility) within Vue 3 Composition API.","symbol":"ref","correct":"import { ref } from 'vue';"},{"note":"If not using directly in `<script setup>`, you might register it globally or locally in a component's `components` option.","symbol":"BetterPicker (Global Registration)","correct":"app.component('BetterPicker', BetterPicker);"}],"quickstart":{"code":"<!-- src/App.vue -->\n<template>\n  <div style=\"padding: 20px; text-align: center;\">\n    <h1>Vue 3 Better Picker Demo</h1>\n    <button @click=\"show = true\">Open Picker</button>\n    <BetterPicker v-model=\"show\" :data=\"pickerData\" @select=\"onSelect\" title=\"Select Options\" cancelText=\"Close\" confirmText=\"Choose\"/>\n    <p>Selected values: {{ selectedResult.join(', ') }}</p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport BetterPicker from \"vue-3-better-picker\";\n\nconst show = ref(false);\nconst selectedResult = ref<string[]>([]);\n\nconst pickerData = [\n  // left slot\n  [\n    { value: \"apple\", text: \"Apple\" },\n    { value: \"banana\", text: \"Banana\" },\n    { value: \"cherry\", text: \"Cherry\" }\n  ],\n  // center slot\n  [\n    { value: \"small\", text: \"Small\" },\n    { value: \"medium\", text: \"Medium\" },\n    { value: \"large\", text: \"Large\" }\n  ],\n  // right slot\n  [\n    { value: \"red\", text: \"Red\" },\n    { value: \"green\", text: \"Green\" },\n    { value: \"blue\", text: \"Blue\" }\n  ]\n];\n\nconst onSelect = (selectedValues: { value: string; text: string }[]) => {\n  console.log(\"Selected:\", selectedValues);\n  selectedResult.value = selectedValues.map(item => item.text);\n  show.value = false; // Close the picker after selection\n};\n</script>\n\n<style>\nbody { font-family: sans-serif; }\n</style>","lang":"typescript","description":"This example demonstrates how to import and use the `BetterPicker` component, bind its visibility with `v-model`, provide data for multiple selection slots, and handle the `select` event to retrieve chosen values. It also shows a basic button to trigger the picker and display the selected items."},"warnings":[{"fix":"For Vue 2 projects, use the `vue2` branch of the s-sasaki-0529/vue-better-picker repository or the original `openfe-openfe/vue-better-picker`.","message":"This package is explicitly for Vue 3. Attempting to use it with Vue 2 will result in compatibility errors and likely a broken application. The original `vue-better-picker` package or the `vue2` branch of this repository should be used for Vue 2 projects.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Ensure your `pickerData` adheres to `Array<{ value: string | number; text: string }>[]`. For example: `[[{ value: 'a', text: 'A' }], [{ value: 'b', text: 'B' }]]`.","message":"The `data` prop expects a very specific array-of-arrays structure. Each inner array represents a slot in the picker, and each object within those arrays must have `value` and `text` properties.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use `v-model=\"showPicker\"` for visibility and `@select=\"handleSelection\"` to capture the chosen items in a separate method.","message":"The `v-model` prop controls the *visibility* of the picker, not the selected values. To get the selected values, you must listen to the `@select` event.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"search_vec":"'-3':7 '/vue-better-picker':35 '3':2,22,41 '3.0.4':51 'adapt':37 'aim':70 'api':44 'applic':23 'better':9 'better-pick':8 'clean':56 'compat':74 'compon':5,17 'composit':43 'current':48 'design':18 'develop':78 'environ':67 'first':15 'fork':28 'includ':80 'leverag':39 'librari':36,69 'maintain':27 'mobil':3,14,66 'mobile-first':13 'modern':76 'openf':33,34 'openfe-openf':32 'packag':53 'picker':4,10,16 'popular':31 'practic':79 'provid':54 'reactiv':46 'respons':58 'seen':64 'select':61 'specif':19 'stabil':72 'system':47 'typic':63 'ui':59 'valu':62 'version':50 'vue':1,6,21,40,77","created_at":"2026-04-20T01:58:47.689039+00:00","updated_at":"2026-04-20T01:58:47.689039+00:00","problems":[{"fix":"Add `import BetterPicker from 'vue-3-better-picker';` to your script and ensure it's available, especially when using options API or global registration. For `<script setup>`, ensure the import is present.","cause":"The `BetterPicker` component was not properly imported or registered in your Vue application or component.","error":"[Vue warn]: Failed to resolve component: BetterPicker"},{"fix":"Verify that `pickerData` is an `Array<Array<{ value: string; text: string }>>` with correct object structures within each slot array.","cause":"The `data` prop passed to the `BetterPicker` component is malformed, missing the expected `value` or `text` keys, or not an array of arrays.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'value') in BetterPicker"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/s-sasaki-0529/vue-better-picker","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-3-better-picker","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}