Vue component now working in my package

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