how to overwrite Vue component files?

[lYesterdaYl]

I want to overwrite image-items under packages\Webkul\Ui\src\Resources\assets\js\components\image

How do i do that properly?

[shivam-webkul]

Hi @lYesterdaYl ,

Could you please explain the issue ?
If you want to overwrite vue component for example image component
Then you have to create same directory structure in you package Like

youpackage->src->Resources->assets->js->components->image->image-item.vue
then add your component in app.js
Vue.component("image-item", require("./components/image/image-item"));
then compile the js.

Thanks,

[lYesterdaYl]

Hi, I created a file called "image-item-new.vue" under "\packages\Webkul\Ui\src\Resources\assets\js\components\image" which different code, and changed app.js
"Vue.component("image-item", require("./components/image/image-item"));"

to

"Vue.component("image-item", require("./components/image/image-item-new"));"

Finally, I ran npm run dev, but sadly, not working for me. Do I need to compile with another command?

[rahulshukla-webkul]

Hi @lYesterdaYl

Kindly run npm run watch-poll and clear browser cache then check.

[jitendra-webkul]

I am considering this issue resolved as there is no reply from the last 28 days.

[ImTheRealOne]

Hi, I am having similar issues where I am editing the packages\Webkul\Ui\src\Resources\assets\js\components\image component in the webkul folder and they are not updating.
I am attempting to override or create new vue components for video to attach to the display item vue component in the shop. I have tried to npm run watch-poll in packages\ and packages\Webkul\ and clear browser cache but the vue components does not update in the admin portal. I checked the recompiled app.js in public and it does not seem to recompile the updated version.

Do you have any suggestions on how to recompile the components?

[ejaz-alam-dev]

is there any solution for this? where is the Bagisto community maintainer, why they do not reply to the issue?

[ejaz-alam-dev]

rahulshukla-webkul , hello, I need your help.

I want to override the Module A vue.js component in my custom Module B. What would be the procedure?

[ejaz-alam-dev]

@jitendra-webkul can you please answer to my question?

[devansh-webkul]

Hi @ejaz-alam-dev,

• Does both of your modules, use the same root Vue js component? Because in the 1.x version, we have a global component.

• Also this is some kind of customization and is not considered as an issue. For that, you can try our Bagisto forum channel,
  https://forums.bagisto.com/

[ejaz-alam-dev]

as I am new to this platform. I need to know the exact case for this.
if you please guide me. I really stuck in this. @devansh-webkul

[devansh-webkul]

I can guide you but first, clear me things that I asked above.

• Does both of your modules, use the same root Vue js component? And how you are managing your module.

[ejaz-alam-dev]

@devansh-webkul , first of all thank you so much and I really appreciate that you replied.

secondly, there were some changes I had to make to the existing functionality of Bagisto. I wrote a custom module in a root/packages folder like

root_folder/packagesVendorName/CustomPackageName

there I created my custom vue.js in

packages/VendorName/Checkout/src/Resources/assets/js/UI/components/checkout/vue-js-file.vue

I tried to follow the same directory structure as the main file which was in

packages/Webkul/Velocity/src/Resources/assets/js/UI/components/checkout/shop-checkout.vue

now in the custom file which is in my module, I am trying to get the content of the Webkul vue component but it is unable to find it.

I need your guidance what is the exact and recommended way to override a vue file.

thanks