Recent Topics

Custom vue component not working in bagisto custom theme



  • Hi,

    I have added app.js file in package "src\Resources\assets\js" and then added the component file into it using

    import $ from 'jquery';
    import Vue from 'vue';
    import minicart from './components/minicart';

    window.jQuery = window.$ = $;
    window.Vue = Vue;

    window.eventBus = new Vue();

    Vue.component('minicart', minicart);

    $(document).ready(function () {
    const app = new Vue({
    el: "#app",

    });
    
    window.app = app;
    

    });

    post that I added minicart.vue file in components folder and added the code there.

    After that I ran npm run prod in my package folder (npm run install first) and all worked well but my component did not work on the frontend.

    On the front end theme file, I added it with the name <minicart></minicart>

    is there any documentation to create custom component and use it in custom theme?



  • There is no Bagisto thing here you are trying to create a new theme. You should be familiar with Vue and Laravel package development.

    I recommend you to check the Laravel Package Development docs and Vue JS docs.



  • Any documentation on bagisto side for the velocity components?

    Any change in the existing component is not working too. I ran npm run prod command too inside "packages/Webkul/Velocity" but no change on the website



  • Hi @rahulanand84,

    No documentation for components because this totally theme-based.

    For the velocity component, first, check whether you have node modules or not. Run thenpm install command to generate the nor modules.

    Then run this command npm run prod.

    The second thing, velocity components are designed as per the velocity theme, if you try to integrate into the new theme then you should check the compatibility first.

    For e.g. you are trying to take a mini cart component, there are several other components that the mini cart depends on. So you need to check as per the new theme requirements.


Log in to reply