Recent Topics

Vue component now working in my package



  • Hi Bagisto Team,

    ive build a package, On that package i need to add vue components. Not vue component that comes with bagisto. Its a separate component comes with the package im building.

    i follow bellow thread to add css and js file with my package
    https://forums.bagisto.com/topic/348/how-to-include-script-and-css-file-in-payment-blade-php/23.Im looking for the solution in this forum last two days but could able to find any solution. So please give me some spacific solution

    Thanks in advance



  • Hi @moin,

    You can take a reference from Velocity package just need to set up some files and done.



  • @devansh-webkul this is my app.js file

    demo.vue

    <template>
        <h1>Hello</h1>
    </template>
    
    <script>
        export default {
            name: "demo"
        }
    </script>
    
    

    app.js

    import Demo from './component/demo'
    
    Vue.config.devtools = true
    Vue.use(Demo)
    

    PackageServiceProvider

    Event::listen('bagisto.admin.layout.body.after', function($viewRenderEventManager) {
               $viewRenderEventManager->addTemplate('customeraccount::admin.layouts.js');
           });
    

    js.blade.php

    <script type="text/javascript" src="{{ bagisto_asset('/themes/default/assets/js/app.js') }}"></script>
    
    

    create.blade.php

    <div class="control-group" :class="[errors.has('customer_id') ? 'has-error' : '']">
             <label for="amount"> {{ __('customeraccount::app.form.customer_name') }}</label>
             <demo class="control-group"></demo>
    </div>
    

    Commands i run
    npm run prod
    php artisan vendor:publish

    So whats im missing here



  • Hi @moin,

    Check app.js and webpack.mix.js files. You need to configure it properly.

    Also, try to just share with me the error logs for npm run prod.



  • Hi @devansh-webkul

    this is the app.js file

    import Demo from './component/demo'
    
    Vue.config.devtools = true
    Vue.use(Demo)
    

    i didn't change anything on the webpack.mix.js file, It's as it is like when we create a fresh package.
    when i run npm run prod no error showing everything working fine.

    Basically I just want to use that vue component in admin aria not in the shop side. So what configuration we should do, can you explain it more or any code example will work faster to understand

    Thanks



  • Hi @moin,

    Can you share with me the full file create.blade.php? I think the problem lies here.



  • Hi @devansh-webkul

    here is the create.blade.php file

    @extends('admin::layouts.content')
    
    @section('page_title')
        Customer Account
    @stop
    
    @section('content-wrapper')
    
        <div class="content full-page dashboard">
            <div class="page-header">
                <div class="page-title">
                    <h1>Customer Account</h1>
                </div>
    
                <div class="page-action">
                    <a href="{{ route('admin.customer.create') }}" class="btn btn-lg btn-primary">
                        {{ __('admin::app.customers.customers.add-title') }}
                    </a>
                </div>
            </div>
    
            <div class="page-content">
                <form method="POST" action="{{ route('customeraccount.admin.store') }}">
                    <div class="page-content">
                        <div class="form-container">
                            @csrf()
                            <div class="style:overflow: auto;">&nbsp;</div>
    
                            <div slot="body">
                                <div class="control-group" :class="[errors.has('account_no') ? 'has-error' : '']">
                                    <label for="account_no"> {{ __('customeraccount::app.form.account_no') }}</label>
                                    <input type="text"  class="control readOnly" name="account_no"
                                           value="{{ $accountNumber }}"
                                           readonly />
                                    <span class="control-error" v-if="errors.has('account_no')">@{{ errors.first('account_no') }}</span>
                                </div>
                                <div class="control-group" :class="[errors.has('nid') ? 'has-error' : '']">
                                    <label for="nid" class="required"> {{ __('customeraccount::app.form.nid') }}</label>
                                    <input type="text"  class="control" name="nid" v-validate="'required'"
                                           data-vv-as="&quot;{{ __('customeraccount::app.form.nid') }}&quot;"/>
                                    <span class="control-error" v-if="errors.has('nid')">@{{ errors.first('nid') }}</span>
                                </div>
                                <div class="control-group" :class="[errors.has('nid') ? 'has-error' : '']">
                                    <label for="amount" class="required"> {{ __('customeraccount::app.form.amount') }}</label>
                                    <input type="text"  class="control" name="amount"
                                           data-vv-as="&quot;{{ __('customeraccount::app.form.amount') }}&quot;"/>
                                    <span class="control-error" v-if="errors.has('amount')">@{{ errors.first('amount') }}</span>
                                </div>
                                <div class="control-group" :class="[errors.has('customer_id') ? 'has-error' : '']">
                                    <label for="amount"> {{ __('customeraccount::app.form.customer_name') }}</label>
                                    {{--<input type="text" class="control readOnly" value="{{ $customerAccount->customer->name }}" readonly/>--}}
                                    {{--<v-select class="control-group" :options="{{ $customers }}" label="phone">--}}
                                        {{--<template v-slot:option="option">--}}
                                            {{[email protected]{{ option.first_name }} @{{ option.last_name }}--}}
                                        {{--</template>--}}
                                    {{--</v-select>--}}
                                    <demo class="control-group"></demo>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-lg btn-primary">
                                {{ __('admin::app.customers.customers.save-btn-title') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @stop
    


  • Hi @moin,

    I checked your blade file, it extends the main master file where is your compiled JS file.

    The compiled file is missing.



  • @devansh-webkul

    It has been a long time to figure out the problem. I ill delete my package and start over again anyway.
    Can you just give me the basic instruction how vue can be used in a freshly created package in bagisto like you are giving instruction to a beginner. So anybody want to use their custom view component to both shop and admin aria.

    Thanks in advance



  • Hi @moin! Were you able to solve your problem? It seems that extending/modifying bagisto is quite an odyssey.
    Nowhere is there any documentation on how to do this.



  • @mreduar have you found it out yet?



  • If you are familiar with Laravel then modifying stuff was not so tough. As it is totally Laravel.



  • @mreduar said in Vue component now working in my package:

    Hi @moin! Were you able to solve your problem? It seems that extending/modifying bagisto is quite an odyssey.
    Nowhere is there any documentation on how to do this.

    https://devdocs.bagisto.com/



  • @anhngutalkfirst It seems that you have to add your vue component directly in packages "packages\Webkul\Velocity\src\Resources\assets\js\app.js", I tried other ways like registering it in the js of my own package, but I got nothing. This is not stated ANYWHERE in the documentation.



  • But did you compiled and added properly in your custom package master. Because it's Vue JS stuff.


Log in to reply