Import a Third-Party Component (vue-color) in the custom Vue.js Component

Question

I recently started using Vue.js and I want to create simple TODO application. But I need to have opportunity to choose a color for my task in the input form. So, I've found a third-party library vue-color, but I don't know how to include it in my app with next structure based on webpack template:

../
  src
    components
      ProjectInput.vue
      ProjectItem.vue
      ProjectList.vue
      ColorPicker.vue
    App.vue
    main.js

Component ProjectInput has next definition of color component:

<template>
    ...
    <color-picker/>

<script>
  import ColorPicker from './ColorPicker'

  export default {
    components: {
      ColorPicker
    },
  ...

... and a simple component ColorPicker.vue from documentation:

<template>
  <div class="input-group color-picker-component">
     <chrome-picker></chrome-picker>
  </div>
</template>
<script>
  import { Chrome } from 'vue-color'
  export default {
   name: 'ColorPicker',
   components: {
     'chrome-picker': Chrome
   },
 }
</script>

It return an error when will render ProjectInput

 [Vue warn]: Error in data(): "TypeError: Cannot read property 'h' of undefined"
 found in
  ---> <Chrome> at src/components/Chrome.vue
   <ColorPicker> at src/components/ColorPicker.vue
     <ProjectInput> at src/components/ProjectInput.vue
       <ProjectList> at src/components/ProjectList.vue
         <App> at src/App.vue
           <Root>

I tried a different ways. I tried to import vue-color in main.js and use like Vue.use(VueColor) in order create component in ProjectInput like var Chrome = VueColor.Crome but it return an error VueColor is undefined

How to import it correctly?

Max Sinev Max Sinev · Accepted Answer · 2018-07-26T10:20:29

vue-color component can not find initial color. You should provide v-model or :value/@input:

new Vue({
  el: "#app",
  components: {
     ChromeColor: VueColor.Chrome
  },
  data: {
    color: '#ff00ff'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-color/2.4.6/vue-color.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <chrome-color v-model="color"></chrome-color>
</div>

Import a Third-Party Component (vue-color) in the custom Vue.js Component

1 Answers