Registry / web-framework / vue-3-better-picker

vue-3-better-picker

library3.0.4jsnpmunverified

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.

web-framework

npm install vue-3-better-picker

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-3-BETTER-PICKE

vue-3-better-picker

web-frameworkjavascriptv3.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

BetterPicker

✓ import BetterPicker from 'vue-3-better-picker';

✗ const BetterPicker = require('vue-3-better-picker');

Primarily designed for ESM environments with Vue 3's module system. CommonJS `require` is not the recommended or typical usage pattern for Vue components.

ref

✓ import { ref } from 'vue';

Often used alongside BetterPicker for managing component state (e.g., picker visibility) within Vue 3 Composition API.

BetterPicker (Global Registration)

✓ app.component('BetterPicker', BetterPicker);

If not using directly in `<script setup>`, you might register it globally or locally in a component's `components` option.

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.

<template> <div style="padding: 20px; text-align: center;"> <h1>Vue 3 Better Picker Demo</h1> <button @click="show = true">Open Picker</button> <BetterPicker v-model="show" :data="pickerData" @select="onSelect" title="Select Options" cancelText="Close" confirmText="Choose"/> <p>Selected values: {{ selectedResult.join(', ') }}</p> </div> </template> <script setup lang="ts"> import { ref } from "vue"; import BetterPicker from "vue-3-better-picker"; const show = ref(false); const selectedResult = ref<string[]>([]); const pickerData = [ // left slot [ { value: "apple", text: "Apple" }, { value: "banana", text: "Banana" }, { value: "cherry", text: "Cherry" } ], // center slot [ { value: "small", text: "Small" }, { value: "medium", text: "Medium" }, { value: "large", text: "Large" } ], // right slot [ { value: "red", text: "Red" }, { value: "green", text: "Green" }, { value: "blue", text: "Blue" } ] ]; const onSelect = (selectedValues: { value: string; text: string }[]) => { console.log("Selected:", selectedValues); selectedResult.value = selectedValues.map(item => item.text); show.value = false; // Close the picker after selection }; </script> <style> body { font-family: sans-serif; } </style>

Debug

Known issues

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

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

affects: >=3.0.0

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

fix

Ensure your `pickerData` adheres to `Array<{ value: string | number; text: string }>[]`. For example: `[[{ value: 'a', text: 'A' }], [{ value: 'b', text: 'B' }]]`.

affects: >=3.0.0

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

fix

Use `v-model="showPicker"` for visibility and `@select="handleSelection"` to capture the chosen items in a separate method.

affects: >=3.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: BetterPicker

The `BetterPicker` component was not properly imported or registered in your Vue application or component.

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.

Uncaught TypeError: Cannot read properties of undefined (reading 'value') in BetterPicker

The `data` prop passed to the `BetterPicker` component is malformed, missing the expected `value` or `text` keys, or not an array of arrays.

fix

Verify that `pickerData` is an `Array<Array<{ value: string; text: string }>>` with correct object structures within each slot array.

Upgrade

Version history

3.0.4latest on npm

Audit

Dependencies

vuerequiredPeer dependency, required for Vue 3 component functionality.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/s-sasaki-0529/vue-better-picker ↗

packagehttps://www.npmjs.com/package/vue-3-better-picker ↗