How can i add custom library (component) to my theme and vuejs?

[gerardfollano]

This is what i have main.js
import CoolLightBox from 'vue-cool-lightbox' app.use(CoolLightBox)

Then src/vue/components/render/image-lightbox.vue

`<template>
    <div>
        <CoolLightBox :items="items" />
    </div>
</template>`

`<script>
export default {
  name: "ImageLightbox",
  data: function () {
    return {
      items: [
        'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*',
      ],
      index: null
    };
  },
};
</script>`

Then src/vue/components/render/image-lightbox.vue
shopify/sections/section-image-row.liquid

<image-lightbox></image-lightbox>

I get this error every time?

[Vue warn]: Missing required prop: "index" 
  at <CoolLightBox items= ['https://hips.hearstapps.com/hmg-prod.s3.amazonaws.…76.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*'] > 
  at <ImageLightbox> 
  at <App>
warn @ runtime-core.esm-bundler.js:6712
validateProp @ runtime-core.esm-bundler.js:2877
validateProps @ runtime-core.esm-bundler.js:2867
initProps @ runtime-core.esm-bundler.js:2572
setupComponent @ runtime-core.esm-bundler.js:6405
mountComponent @ runtime-core.esm-bundler.js:4332
processComponent @ runtime-core.esm-bundler.js:4307
patch @ runtime-core.esm-bundler.js:3908
mountChildren @ runtime-core.esm-bundler.js:4095
mountElement @ runtime-core.esm-bundler.js:4004
processElement @ runtime-core.esm-bundler.js:3985
patch @ runtime-core.esm-bundler.js:3905
componentUpdateFn @ runtime-core.esm-bundler.js:4447
run @ reactivity.esm-bundler.js:197
setupRenderEffect @ runtime-core.esm-bundler.js:4566
mountComponent @ runtime-core.esm-bundler.js:4349
processComponent @ runtime-core.esm-bundler.js:4307
patch @ runtime-core.esm-bundler.js:3908
mountChildren @ runtime-core.esm-bundler.js:4095
mountElement @ runtime-core.esm-bundler.js:4004
processElement @ runtime-core.esm-bundler.js:3985
patch @ runtime-core.esm-bundler.js:3905
mountChildren @ runtime-core.esm-bundler.js:4095
mountElement @ runtime-core.esm-bundler.js:4004
processElement @ runtime-core.esm-bundler.js:3985
patch @ runtime-core.esm-bundler.js:3905
mountChildren @ runtime-core.esm-bundler.js:4095
processFragment @ runtime-core.esm-bundler.js:4266
patch @ runtime-core.esm-bundler.js:3901
componentUpdateFn @ runtime-core.esm-bundler.js:4447
run @ reactivity.esm-bundler.js:197
setupRenderEffect @ runtime-core.esm-bundler.js:4566
mountComponent @ runtime-core.esm-bundler.js:4349
processComponent @ runtime-core.esm-bundler.js:4307
patch @ runtime-core.esm-bundler.js:3908
render @ runtime-core.esm-bundler.js:5051
mount @ runtime-core.esm-bundler.js:3302
app.mount @ runtime-dom.esm-bundler.js:1730
eval @ main.js:92
./src/main.js @ bundle.js?v=17183839040763167818:393
__webpack_require__ @ bundle.js?v=17183839040763167818:512
(anonymous) @ bundle.js?v=17183839040763167818:564
(anonymous) @ bundle.js?v=17183839040763167818:566
Show 13 more frames
runtime-core.esm-bundler.js:6712 [Vue warn]: Property "$createElement" was accessed during render but is not defined on instance. 
  at <CoolLightBox items= ['https://hips.hearstapps.com/hmg-prod.s3.amazonaws.…76.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*'] > 
  at <ImageLightbox> 
  at <App>
warn @ runtime-core.esm-bundler.js:6712
get @ runtime-core.esm-bundler.js:6164
__vue_render__ @ vue-cool-lightbox.esm.js:1790
renderComponentRoot @ runtime-core.esm-bundler.js:592
componentUpdateFn @ runtime-core.esm-bundler.js:4440
run @ reactivity.esm-bundler.js:197
setupRenderEffect @ runtime-core.esm-bundler.js:4566
mountComponent @ runtime-core.esm-bundler.js:4349
processComponent @ runtime-core.esm-bundler.js:4307
patch @ runtime-core.esm-bundler.js:3908
mountChildren @ runtime-core.esm-bundler.js:4095
mountElement @ runtime-core.esm-bundler.js:4004
processElement @ runtime-core.esm-bundler.js:3985
patch @ runtime-core.esm-bundler.js:3905
componentUpdateFn @ runtime-core.esm-bundler.js:4447
run @ reactivity.esm-bundler.js:197
setupRenderEffect @ runtime-core.esm-bundler.js:4566
mountComponent @ runtime-core.esm-bundler.js:4349
processComponent @ runtime-core.esm-bundler.js:4307
patch @ runtime-core.esm-bundler.js:3908
mountChildren @ runtime-core.esm-bundler.js:4095
mountElement @ runtime-core.esm-bundler.js:4004
processElement @ runtime-core.esm-bundler.js:3985
patch @ runtime-core.esm-bundler.js:3905
mountChildren @ runtime-core.esm-bundler.js:4095
mountElement @ runtime-core.esm-bundler.js:4004
processElement @ runtime-core.esm-bundler.js:3985
patch @ runtime-core.esm-bundler.js:3905
mountChildren @ runtime-core.esm-bundler.js:4095
processFragment @ runtime-core.esm-bundler.js:4266
patch @ runtime-core.esm-bundler.js:3901
componentUpdateFn @ runtime-core.esm-bundler.js:4447
run @ reactivity.esm-bundler.js:197
setupRenderEffect @ runtime-core.esm-bundler.js:4566
mountComponent @ runtime-core.esm-bundler.js:4349
processComponent @ runtime-core.esm-bundler.js:4307
patch @ runtime-core.esm-bundler.js:3908
render @ runtime-core.esm-bundler.js:5051
mount @ runtime-core.esm-bundler.js:3302
app.mount @ runtime-dom.esm-bundler.js:1730
eval @ main.js:92
./src/main.js @ bundle.js?v=17183839040763167818:393
__webpack_require__ @ bundle.js?v=17183839040763167818:512
(anonymous) @ bundle.js?v=17183839040763167818:564
(anonymous) @ bundle.js?v=17183839040763167818:566
Show 15 more frames
runtime-core.esm-bundler.js:6712 [Vue warn]: Property "_self" was accessed during render but is not defined on instance. 
  at <CoolLightBox items= ['https://hips.hearstapps.com/hmg-prod.s3.amazonaws.…76.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*'] > 
  at <ImageLightbox> 
  at <App>
warn @ runtime-core.esm-bundler.js:6712
get @ runtime-core.esm-bundler.js:6164
__vue_render__ @ vue-cool-lightbox.esm.js:1790
renderComponentRoot @ runtime-core.esm-bundler.js:592
componentUpdateFn @ runtime-core.esm-bundler.js:4440
run @ reactivity.esm-bundler.js:197
setupRenderEffect @ runtime-core.esm-bundler.js:4566
mountComponent @ runtime-core.esm-bundler.js:4349
processComponent @ runtime-core.esm-bundler.js:4307
patch @ runtime-core.esm-bundler.js:3908
mountChildren @ runtime-core.esm-bundler.js:4095
mountElement @ runtime-core.esm-bundler.js:4004
processElement @ runtime-core.esm-bundler.js:3985
patch @ runtime-core.esm-bundler.js:3905
componentUpdateFn @ runtime-core.esm-bundler.js:4447
run @ reactivity.esm-bundler.js:197
setupRenderEffect @ runtime-core.esm-bundler.js:4566
mountComponent @ runtime-core.esm-bundler.js:4349
processComponent @ runtime-core.esm-bundler.js:4307
patch @ runtime-core.esm-bundler.js:3908
mountChildren @ runtime-core.esm-bundler.js:4095
mountElement @ runtime-core.esm-bundler.js:4004
processElement @ runtime-core.esm-bundler.js:3985
patch @ runtime-core.esm-bundler.js:3905
mountChildren @ runtime-core.esm-bundler.js:4095
mountElement @ runtime-core.esm-bundler.js:4004
processElement @ runtime-core.esm-bundler.js:3985
patch @ runtime-core.esm-bundler.js:3905
mountChildren @ runtime-core.esm-bundler.js:4095
processFragment @ runtime-core.esm-bundler.js:4266
patch @ runtime-core.esm-bundler.js:3901
componentUpdateFn @ runtime-core.esm-bundler.js:4447
run @ reactivity.esm-bundler.js:197
setupRenderEffect @ runtime-core.esm-bundler.js:4566
mountComponent @ runtime-core.esm-bundler.js:4349
processComponent @ runtime-core.esm-bundler.js:4307
patch @ runtime-core.esm-bundler.js:3908
render @ runtime-core.esm-bundler.js:5051
mount @ runtime-core.esm-bundler.js:3302
app.mount @ runtime-dom.esm-bundler.js:1730
eval @ main.js:92
./src/main.js @ bundle.js?v=17183839040763167818:393
__webpack_require__ @ bundle.js?v=17183839040763167818:512
(anonymous) @ bundle.js?v=17183839040763167818:564
(anonymous) @ bundle.js?v=17183839040763167818:566
Show 15 more frames
runtime-core.esm-bundler.js:6712 [Vue warn]: Unhandled error during execution of render function 
  at <CoolLightBox items= ['https://hips.hearstapps.com/hmg-prod.s3.amazonaws.…76.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*'] > 
  at <ImageLightbox> 
  at <App>

[gerardfollano]

@sergejcodes Could you have a look at this? I am trying to add a component from a third party library and cannot figure out why I am getting a render error. Thanks!

[sergejcodes]

This is vue-cool-lightbox specific error the index prop is missing in your example code. Have a look at https://vue-cool-lightbox.lucaspulliese.com/ I don't have any issues integrating the example code.

change from: <CoolLightBox :items="items" />
to: <CoolLightBox :items="items" :index="index" />

[gerardfollano]

@sergejcodes this has definitely something to do with the framework and how i am traditionally using third part components.. I just installed another package and it is pretty much dojng the same thing.

liquid file:
<suggest-it></suggest-it>

component file:

<template>
  <v-suggest :data="example" show-field="name" v-model="myValue">
  </v-suggest>
</template>
 
<script>
import { Suggest } from 'v-suggest'
export default {
    name:"suggest-it",
    components: {
    'v-suggest': Suggest
  },
  data () {
    return {
      myValue: '',
      example: [
        { id: 1, name: 'Chicago Bulls', desc: '芝加哥公牛' },
        { id: 2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士' }
      ]
    }
  }
}
</script>

Console:

`runtime-core.esm-bundler.js:6712` [Vue warn]: Unhandled error during execution of render function 
  at <VSuggest data= Array(2) show-field="name" modelValue=""  ... > 
  at <SuggestIt> 
  at <App>
warn @ runtime-core.esm-bundler.js:6712
runtime-core.esm-bundler.js:6892 Uncaught TypeError: t is not a function
    at Proxy.buildCaller (v-suggest.js:1:20336)
    at Proxy.render (v-suggest.js:1:19967)
    at renderComponentRoot (runtime-core.esm-bundler.js:592:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4440:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:197:29)
    at setupRenderEffect (runtime-core.esm-bundler.js:4566:9)
    at mountComponent (runtime-core.esm-bundler.js:4349:9)
    at processComponent (runtime-core.esm-bundler.js:4307:17)
    at patch (runtime-core.esm-bundler.js:3908:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4447:21)
DevTools failed to load source map: Could not load content for webpack://shopify-foundation-theme/node_modules/v-suggest/dist/v-suggest.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for https://cdn.shopify.com/s/trekkie.storefront.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE`