Unknown custom element: <multiselect> when using vueMultiSelect
See original GitHub issueThis 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:
- Created 7 years ago
- Comments:6 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Register the component globally. Add this to your
main.js
beforenew Vue()
And ofc don’t forget to import CSS style for Multiselect. Example here
This error is still thrown. Is there any way to make it work?