{"id":15735,"library":"nuxt-vue-multiselect","title":"Nuxt Vue Multiselect Module","description":"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.","status":"abandoned","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/spektrummedia/nuxt-vue-multiselect","tags":["javascript"],"install":[{"cmd":"npm install nuxt-vue-multiselect","lang":"bash","label":"npm"},{"cmd":"yarn add nuxt-vue-multiselect","lang":"bash","label":"yarn"},{"cmd":"pnpm add nuxt-vue-multiselect","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This module is a wrapper around the `vue-multiselect` component, making it its core dependency for functionality.","package":"vue-multiselect","optional":false}],"imports":[{"note":"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.","wrong":"import { Multiselect } from 'nuxt-vue-multiselect'","symbol":"Multiselect","correct":"<!-- Use directly in template: <multiselect ... /> -->"},{"note":"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.","wrong":"import NuxtVueMultiselect from 'nuxt-vue-multiselect'","symbol":"default","correct":"// nuxt.config.js\nexport default {\n  modules: ['nuxt-vue-multiselect']\n}"},{"note":"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.","wrong":"import type { Multiselect } from 'nuxt-vue-multiselect'","symbol":"Multiselect (type)","correct":"import type { Multiselect } from 'vue-multiselect'"}],"quickstart":{"code":"/* nuxt.config.js */\nexport default {\n  modules: [\n    'nuxt-vue-multiselect'\n  ],\n  // It's often necessary to manually include the CSS for vue-multiselect.\n  // You can do this globally in nuxt.config.js or directly in a component.\n  css: [\n    'vue-multiselect/dist/vue-multiselect.min.css'\n  ],\n  // If targeting older browsers, you might need to transpile vue-multiselect\n  build: {\n    transpile: ['vue-multiselect']\n  }\n}\n\n/* pages/index.vue (or any other Vue component) */\n<template>\n  <div>\n    <h1>Select Your Favorite Frameworks</h1>\n    <label for=\"framework-select\">Choose some frameworks:</label>\n    <multiselect\n      id=\"framework-select\"\n      v-model=\"selectedFrameworks\"\n      :options=\"availableFrameworks\"\n      :multiple=\"true\"\n      :close-on-select=\"false\"\n      :clear-on-select=\"false\"\n      :searchable=\"true\"\n      placeholder=\"Pick frameworks\"\n      label=\"name\"\n      track-by=\"name\"\n    ></multiselect>\n    <p>Currently selected: {{ selectedFrameworks.map(f => f.name).join(', ') || 'None' }}</p>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue'\n\ninterface FrameworkOption {\n  name: string;\n  code: string;\n}\n\nexport default Vue.extend({\n  name: 'FrameworkSelector',\n  data() {\n    return {\n      selectedFrameworks: [] as FrameworkOption[],\n      availableFrameworks: [\n        { name: 'Vue.js', code: 'VUE' },\n        { name: 'Nuxt.js', code: 'NUXT' },\n        { name: 'React', code: 'REACT' },\n        { name: 'Angular', code: 'ANGULAR' },\n        { name: 'Svelte', code: 'SVELTE' },\n        { name: 'Solid', code: 'SOLID' }\n      ]\n    }\n  },\n})\n</script>","lang":"typescript","description":"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."},"warnings":[{"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.","message":"This 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.","severity":"breaking","affected_versions":">=2.x for Nuxt"},{"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`.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The `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.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"If migrating to Vue 3 or Nuxt 3, you must replace `vue-multiselect` with a Vue 3 compatible alternative.","message":"The 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.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure 'nuxt-vue-multiselect' is present in the `modules` array within your `nuxt.config.js` file and restart your Nuxt development server.","cause":"The `nuxt-vue-multiselect` module was not correctly added to `nuxt.config.js` or there's an issue with Nuxt's component auto-registration.","error":"[Vue warn]: Unknown custom element: <multiselect> - did you register the component correctly?"},{"fix":"Initialize your `v-model` data property to `null` or `[]` (based on `multiple` prop) and ensure `options` is always an array of objects.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'data') (in <Multiselect>)"},{"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.","cause":"The CSS file for `vue-multiselect` is not being found or imported correctly by your build process.","error":"Cannot find module 'vue-multiselect/dist/vue-multiselect.min.css'"}],"ecosystem":"npm"}