Vue component now working in my package

moin

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

devansh-webkul

Hi @moin,

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

moin

@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

devansh-webkul

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.

moin

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

devansh-webkul

Hi @moin,

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

moin

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">--}}
                                        {{--@{{ 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

devansh-webkul

Hi @moin,

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

The compiled file is missing.

moin

@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

mreduar

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.

anhngutalkfirst

@mreduar have you found it out yet?

devansh-webkul

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

ghermans

@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/

mreduar

@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.

devansh-webkul

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