Recent Topics

Vue component now working in my package

  • Hi @devansh-webkul

    this is the app.js file

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

    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


  • 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

        Customer Account
        <div class="content full-page dashboard">
            <div class="page-header">
                <div class="page-title">
                    <h1>Customer Account</h1>
                <div class="page-action">
                    <a href="{{ route('admin.customer.create') }}" class="btn btn-lg btn-primary">
                        {{ __('admin::app.customers.customers.add-title') }}
            <div class="page-content">
                <form method="POST" action="{{ route('') }}">
                    <div class="page-content">
                        <div class="form-container">
                            <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 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 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 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 }}--}}
                                    <demo class="control-group"></demo>
                            <button type="submit" class="btn btn-lg btn-primary">
                                {{ __('') }}

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

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