Nuxt Vue Multiselect Module

Common errors

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

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

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

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

Warnings

• breaking 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.
  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.
• gotcha 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.
  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`.
• deprecated 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.
  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.
• breaking 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.
  Fix: If migrating to Vue 3 or Nuxt 3, you must replace `vue-multiselect` with a Vue 3 compatible alternative.

Install

• npm install nuxt-vue-multiselect npm
• yarn add nuxt-vue-multiselect yarn
• pnpm add nuxt-vue-multiselect pnpm

Imports

• Multiselect
  wrong:

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

  correct:

  <!-- Use directly in template: <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
  wrong:

  import NuxtVueMultiselect from 'nuxt-vue-multiselect'

  correct:

  // nuxt.config.js
  export default {
    modules: ['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)
  wrong:

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

  correct:

  import type { Multiselect } from '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.

Quickstart

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>