Registry / web-framework / nuxt-vue-multiselect

nuxt-vue-multiselect

library1.0.4jsnpmunverified

This Nuxt.js module integrates the `vue-multiselect` component into Nuxt applications, simplifying its setup and usage. It handles the automatic global registration of the `Multiselect` component, allowing developers to use `<multiselect>` directly in their Vue templates without manual imports. `vue-multiselect` itself is a popular component for single/multiple selection, tagging, and asynchronous search capabilities, offering extensive customization through props and slots. This specific Nuxt wrapper, currently at version 1.0.4, shows its last significant activity around 2020. Given its reliance on `vue-multiselect` (which primarily supports Vue 2) and the lack of recent updates, `nuxt-vue-multiselect` is not compatible with Nuxt 3 or Vue 3 projects and should be considered abandoned for modern Nuxt development, best suited for existing Nuxt 2 applications.

web-framework

npm install nuxt-vue-multiselect

github ↗package ↗

INSTALL

IMPORT

SIG · NUXT-VUE-MULTISELE

nuxt-vue-multiselect

web-frameworkjavascriptv1.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.

Multiselect

✓

✗ import { Multiselect } from 'nuxt-vue-multiselect'

The `nuxt-vue-multiselect` module registers the `<multiselect>` component globally. You do not typically need to import it into individual Vue components when using this Nuxt module.

default

✓ // nuxt.config.js export default { modules: ['nuxt-vue-multiselect'] }

✗ import NuxtVueMultiselect from 'nuxt-vue-multiselect'

This module is primarily configured by adding its name to the `modules` array in `nuxt.config.js` and does not expose a default export for direct JavaScript imports into application code.

Multiselect (type)

✓ import type { Multiselect } from 'vue-multiselect'

✗ import type { Multiselect } from 'nuxt-vue-multiselect'

For TypeScript users needing to reference the `vue-multiselect` component's instance type (e.g., for `ref` usage), you should import the type directly from the underlying `vue-multiselect` package, not from the Nuxt wrapper.

This quickstart demonstrates how to set up `nuxt-vue-multiselect` in `nuxt.config.js` and then use the `<multiselect>` component within a Vue template with options for multiple selection.

/* nuxt.config.js */ export default { modules: [ 'nuxt-vue-multiselect' ], // It's often necessary to manually include the CSS for vue-multiselect. // You can do this globally in nuxt.config.js or directly in a component. css: [ 'vue-multiselect/dist/vue-multiselect.min.css' ], // If targeting older browsers, you might need to transpile vue-multiselect build: { transpile: ['vue-multiselect'] } } /* pages/index.vue (or any other Vue component) */ <template> <div> <h1>Select Your Favorite Frameworks</h1> <label for="framework-select">Choose some frameworks:</label> <multiselect id="framework-select" v-model="selectedFrameworks" :options="availableFrameworks" :multiple="true" :close-on-select="false" :clear-on-select="false" :searchable="true" placeholder="Pick frameworks" label="name" track-by="name" ></multiselect> <p>Currently selected: {{ selectedFrameworks.map(f => f.name).join(', ') || 'None' }}</p> </div> </template> <script lang="ts"> import Vue from 'vue' interface FrameworkOption { name: string; code: string; } export default Vue.extend({ name: 'FrameworkSelector', data() { return { selectedFrameworks: [] as FrameworkOption[], availableFrameworks: [ { name: 'Vue.js', code: 'VUE' }, { name: 'Nuxt.js', code: 'NUXT' }, { name: 'React', code: 'REACT' }, { name: 'Angular', code: 'ANGULAR' }, { name: 'Svelte', code: 'SVELTE' }, { name: 'Solid', code: 'SOLID' } ] } }, }) </script>

Debug

Known issues

breakingThis module is built for Nuxt 2 (Vue 2) and is not compatible with Nuxt 3 (Vue 3) projects. Attempting to use it in a Nuxt 3 application will lead to runtime errors or build failures.

fix

For Nuxt 3, use a different multiselect component designed for Vue 3, or integrate `vue-multiselect` directly using a custom plugin, ensuring it's a Vue 3 compatible fork or alternative.

affects: >=2.x for Nuxt

gotchaThe `vue-multiselect` CSS (`vue-multiselect/dist/vue-multiselect.min.css`) may not be automatically included by the Nuxt module in all configurations, leading to unstyled components. This is a common oversight.

fix

Manually import the CSS in your `nuxt.config.js` (e.g., `css: ['vue-multiselect/dist/vue-multiselect.min.css']`) or directly within a root stylesheet or component's `<style>` block using `@import`.

affects: >=1.0.0

deprecatedThe `nuxt-vue-multiselect` module is not actively maintained, with its last commit activity dating back to 2020. This means it may not receive updates for security vulnerabilities, bug fixes, or compatibility with newer Node.js/npm versions.

fix

For new projects, consider modern alternatives or manually integrate a maintained Vue 2/3 compatible multiselect component. For existing projects, proceed with caution and consider auditing its dependencies.

affects: >=1.0.0

breakingThe underlying `vue-multiselect` library itself is primarily designed for Vue 2 and is also not actively maintained for Vue 3. This compounds the abandonment status of the Nuxt wrapper.

fix

If migrating to Vue 3 or Nuxt 3, you must replace `vue-multiselect` with a Vue 3 compatible alternative.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <multiselect> - did you register the component correctly?

The `nuxt-vue-multiselect` module was not correctly added to `nuxt.config.js` or there's an issue with Nuxt's component auto-registration.

fix

Ensure 'nuxt-vue-multiselect' is present in the `modules` array within your `nuxt.config.js` file and restart your Nuxt development server.

TypeError: Cannot read properties of undefined (reading 'data') (in <Multiselect>)

This typically occurs if the `v-model` binding for `<multiselect>` is not initialized with an appropriate value (e.g., `null` for single select, `[]` for multiple select) or if the `options` prop is `undefined` or not an array.

fix

Initialize your `v-model` data property to `null` or `[]` (based on `multiple` prop) and ensure `options` is always an array of objects.

Cannot find module 'vue-multiselect/dist/vue-multiselect.min.css'

The CSS file for `vue-multiselect` is not being found or imported correctly by your build process.

fix

Add `'vue-multiselect/dist/vue-multiselect.min.css'` to the `css` array in `nuxt.config.js`, or manually `@import` it in a global stylesheet.

Upgrade

Version history

1.0.4latest on npm

Audit

Dependencies

vue-multiselectrequiredThis module is a wrapper around the `vue-multiselect` component, making it its core dependency for functionality.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/spektrummedia/nuxt-vue-multiselect ↗

packagehttps://www.npmjs.com/package/nuxt-vue-multiselect ↗