question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unknown custom element: <multiselect> when using vueMultiSelect

See original GitHub issue

This is with these versions:

  "dependencies": {
    "vue": "^2.1.6",
    "vue-form-generator": "^2.0.0-beta1",
    "vue-multiselect": "next"
  },

When I try to use a vueMultiSelect field, I get this error in the console:

[Vue warn]: Unknown custom element: <multiselect> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
(found in component <field-vueMultiSelect>)

Here’s all the relevant code:

main.js

import Vue from 'vue'
import VueFormGenerator from 'vue-form-generator'
Vue.use(VueFormGenerator)

window.VueFormGenerator = VueFormGenerator

import MyComponent from './components/MyComponent.vue'

MyComponent.vue

<template lang='html'>
  <div id='my-component'>
    <form>
      <vue-form-generator :schema='schema' :model='model' :options='formOptions'></vue-form-generator>
    </form>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'
window.VueMultiselect = Multiselect

export default {
  name: 'my-component',
  components: { Multiselect },
  data () {
    return {
      model: {
        skills: ['Javascript', 'VueJS'],
      },
      schema: {
        fields: [
          {
            type: 'vueMultiSelect',
            multiSelect: true,
            label: 'Skills',
            model: 'skills',
            values: ['Javascript', 'VueJS', 'CSS3', 'HTML5']
          }
        ]
      }
    }
  }
}
</script>

I was initially getting this error as well:

'vue-multiselect' is missing. Please download from https://github.com/monterail/vue-multiselect and load the script in the HTML head section!

which comes from here.

I added the import and window. at the top of MyComponent to fix this, by trying to do what fieldVueMultiSelect.vue is expecting. That got rid of that error, but I still get the Unknown custom element: <multiselect> error.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
stravicommented, Apr 29, 2020

Register the component globally. Add this to your main.js before new Vue()

import Multiselect from 'vue-multiselect';
Vue.component('multiselect', Multiselect);

And ofc don’t forget to import CSS style for Multiselect. Example here

0reactions
chteuchteucommented, Feb 16, 2018

This error is still thrown. Is there any way to make it work?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unknown custom element <multiselect> · Issue #518 - GitHub
I've set-up a sample app through Webpackbin, since the JSFiddle won't be able to show the full extent of how everything is interacting....
Read more >
How to use vue-multiselect tagging inside asp .net solution ...
I'm trying to do the multiselect Tagging but i'm getting the errors: [Vue warn]: Unknown custom element: <multiselect> - did you register the ......
Read more >
Multiselect Vue data properties and methods missing - Laracasts
I am trying to use multiselect Vuejs component but I am getting the following ... Unknown custom element: - did you register the...
Read more >
Vue-Multiselect | Vue Select Library
Single select · Single select (object) · Select with search · Multiple select · Asynchronous select · Tagging · Custom option template ·...
Read more >
Vue 3 Multiselect - @vueform/multiselect - npm
- a function returning a Promise (async function) with query and select$ param. The select$ represents the Multiselect component and its API can ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found