{"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.","language":"javascript","status":"abandoned","last_verified":"Tue Apr 21","install":{"commands":["npm install nuxt-vue-multiselect"],"cli":null},"imports":["<!-- Use directly in template: <multiselect ... /> -->","// nuxt.config.js\nexport default {\n  modules: ['nuxt-vue-multiselect']\n}","import type { Multiselect } from 'vue-multiselect'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}