Custom vue component not working in bagisto custom theme

rahulanand84

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?

devansh-webkul

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.

rahulanand84

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

devansh-webkul

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 the npm 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.

rahulanand84

One quick question. After all the steps, we are getting a "js/app.js" file in theme default. Do we need to include this file in our script to run the components like:

devansh-webkul

Yes if you are using default themes then you need to include this file so that your components get rendered.

But this file is already included I guess.

alaa.sawaf

I see many threads talking about issues with vue compiling in bagisto, and the support response always this is not bagisto thing, then what it's ??? it's not vue or laravel thing i use packages and laravel and vue for years not faced any issue only with bagisto.

Please there is not excuse you are not putting details steps on how to integrate vue components in any package, this is a core functionality for bagisto.

i am now stuck on the same issue and no solution.

please explain in details how to add vue to a package and github example project