Registry / web-framework / vue-suggestion

vue-suggestion

library2.1.0jsnpmunverified

vue-suggestion is a Vue 2 component library designed to provide a flexible and customizable suggestion list input, commonly known as an autocomplete field. It simplifies the process of displaying a filtered list of items to users as they type, abstracting away the UI logic for suggestion display and selection. The current stable version is 2.1.0. Releases appear to follow an ad-hoc cadence, with significant rewrites occurring in major versions like v2.0.0. Its key differentiators include support for customizable item templates using Vue components, allowing developers to define exactly how each suggestion in the list is rendered. It also provides a clear API for handling input changes and item selections through events and props.

web-framework

npm install vue-suggestion

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-SUGGESTION

vue-suggestion

web-frameworkjavascriptv2.1.0

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.

VueSuggestion

✓ import VueSuggestion from 'vue-suggestion'; Vue.use(VueSuggestion);

✗ import { VueSuggestion } from 'vue-suggestion'; Vue.use(VueSuggestion);

For global component registration, `VueSuggestion` is a default export intended for `Vue.use()`.

VueSuggestion

✓ import { VueSuggestion } from 'vue-suggestion';

✗ import VueSuggestion from 'vue-suggestion';

For local component registration, `VueSuggestion` is a named export. It should be imported directly and added to the `components` option.

itemTemplate

✓ import itemTemplate from './item-template.vue';

✗ import { itemTemplate } from './item-template.vue';

Custom item templates are typically single-file Vue components, which are imported as default exports.

This quickstart demonstrates how to set up `vue-suggestion` with global plugin registration, local data filtering, a custom label function, and a custom item template. It shows how to handle input changes and item selections to update the component's state.

import Vue from 'vue'; import VueSuggestion from 'vue-suggestion'; import itemTemplate from './item-template.vue'; Vue.use(VueSuggestion); new Vue({ el: '#app', template: ` <div id="app"> <vue-suggestion :items="items" v-model="selectedItem" :setLabel="setLabel" :itemTemplate="itemTemplate" @changed="inputChange" @selected="itemSelected" > </vue-suggestion> <p>Selected Item: {{ selectedItem.name || 'None' }}</p> </div> `, components: { // No need to list VueSuggestion here if globally registered via Vue.use() }, data() { return { selectedItem: {}, items: [ { id: 1, name: 'Golden Retriever' }, { id: 2, name: 'Cat' }, { id: 3, name: 'Squirrel' }, { id: 4, name: 'Dolphin' }, { id: 5, name: 'Elephant' }, ], itemTemplate, }; }, methods: { itemSelected(item) { this.selectedItem = item; console.log('Selected:', item); }, setLabel(item) { return item.name; }, inputChange(text) { console.log('Input changed:', text); // Simulate asynchronous search or filter local data this.items = [ { id: 1, name: 'Golden Retriever' }, { id: 2, name: 'Cat' }, { id: 3, name: 'Squirrel' }, { id: 4, name: 'Dolphin' }, { id: 5, name: 'Elephant' }, ].filter((item) => item.name.toLowerCase().includes(text.toLowerCase())); }, }, });

Debug

Known issues

breakingVersion 2.0.0 was a complete rewrite of the codebase, changing the build tool from Rollup to Vue CLI and reorganizing component props (e.g., `inputOptions`, `suggestionOptions`). Existing v1.x implementations will require significant refactoring.

fix

Refer to the official documentation for v2.0.0+ to understand the new API and prop structure. Migrate prop usage from individual props to the new organized `inputOptions` and `suggestionOptions` objects.

affects: >=2.0.0

breakingVersion 1.0.0 transitioned the build tool from PoiJS to Vue CLI. While less impactful for direct users, internal build processes or highly customized integrations based on pre-1.0.0 build artifacts might be affected.

fix

Update build configurations if they were tightly coupled to the previous build system. For most users, this change will be transparent.

affects: >=1.0.0 <2.0.0

gotchaThe `vue-suggestion` library is primarily built for Vue 2. Using it in a Vue 3 project will likely lead to incompatibility issues and may require a compatibility layer (`@vue/compat`) or manual adaptation, as Vue 3 introduces breaking changes to the reactivity system and component lifecycle.

fix

For Vue 3 projects, consider using a Vue 3 native autocomplete component or migrating with `@vue/compat`. This library is not officially Vue 3 compatible out of the box.

affects: >=1.0.0

gotchaThe component provides basic markup but relies heavily on custom CSS for styling the input, suggestion list, and active item states. Without custom styles, the component's appearance will be minimal and may not integrate well with the application's design.

fix

Implement custom CSS for the `.vue-suggestion` and its child classes (`.vs__list`, `.vs__list-item`, `.vs__item-active`) to match your application's design system. Refer to the provided CSS examples in the documentation.

affects: >=1.0.0

gotchaThe component does not perform data filtering itself. The responsibility of filtering the `items` array based on user input lies with the consumer, typically within the `@changed` event handler. If the `items` prop is not updated correctly, the suggestion list will not show relevant results.

fix

Ensure that the `inputChange` method (or similar handler for the `@changed` event) correctly filters the `items` data property, or fetches new data, based on the provided `text` argument.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <vue-suggestion> - did you register the component correctly? For recursive components, make sure to provide the 'name' option.

The `VueSuggestion` component has not been registered with Vue, either globally via `Vue.use()` or locally within a parent component's `components` option.

fix

To register globally: `import VueSuggestion from 'vue-suggestion'; Vue.use(VueSuggestion);`. To register locally: `import { VueSuggestion } from 'vue-suggestion'; export default { components: { VueSuggestion } };`

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

The `setLabel` prop or the `itemTemplate` expects a specific property (e.g., `name`) on the `item` object, but the `items` array contains objects with a different structure or `item` is undefined.

fix

Verify that the `items` array elements have the properties expected by `setLabel` and your `itemTemplate`. Adjust `setLabel` and `itemTemplate` to match the actual data structure of your `items`.

Suggestion list appears empty or doesn't update when typing.

The `inputChange` event handler is not correctly updating the component's `items` data property, or the filtering logic within `inputChange` is incorrect, resulting in an empty or unfiltered `items` array.

fix

Ensure that within your `@changed` event handler, `this.items` is actively updated with the filtered results based on the input `text`. Double-check your filtering logic or data fetching mechanism.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/iamstevendao/vue-suggestion ↗

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