Bagisto Forum

    Bagisto

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups

    Vue component now working in my package

    General Discussion
    5
    15
    2136
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      moin last edited by

      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

      1 Reply Last reply Reply Quote 0
      • devansh-webkul
        devansh-webkul last edited by

        Hi @moin,

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

        M 1 Reply Last reply Reply Quote 0
        • M
          moin @devansh-webkul last edited by

          @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

          1 Reply Last reply Reply Quote 0
          • devansh-webkul
            devansh-webkul last edited by

            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.

            M 1 Reply Last reply Reply Quote 0
            • M
              moin @devansh-webkul last edited by

              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

              1 Reply Last reply Reply Quote 0
              • devansh-webkul
                devansh-webkul last edited by

                Hi @moin,

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

                M 1 Reply Last reply Reply Quote 0
                • M
                  moin @devansh-webkul last edited by

                  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
                  
                  1 Reply Last reply Reply Quote 0
                  • devansh-webkul
                    devansh-webkul last edited by

                    Hi @moin,

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

                    The compiled file is missing.

                    M 1 Reply Last reply Reply Quote 0
                    • M
                      moin @devansh-webkul last edited by

                      @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

                      1 Reply Last reply Reply Quote 2
                      • M
                        mreduar last edited by

                        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 ghermans 2 Replies Last reply Reply Quote 0
                        • anhngutalkfirst
                          anhngutalkfirst @mreduar last edited by

                          @mreduar have you found it out yet?

                          anhngutalkfirst

                          M 1 Reply Last reply Reply Quote 0
                          • devansh-webkul
                            devansh-webkul last edited by

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

                            1 Reply Last reply Reply Quote 0
                            • ghermans
                              ghermans @mreduar last edited by

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

                              Kind regards,
                              Glenn Hermans

                              Manager Bagisto Europe
                              info@bagisto.eu

                              1 Reply Last reply Reply Quote -1
                              • M
                                mreduar @anhngutalkfirst last edited by

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

                                1 Reply Last reply Reply Quote 0
                                • devansh-webkul
                                  devansh-webkul last edited by

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

                                  1 Reply Last reply Reply Quote 0
                                  • First post
                                    Last post