• Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Register
  • Login
Bagisto Forum

Bagisto

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

Vue component now working in my package

General Discussion
5
15
2.1k
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 @devansh-webkul last edited by 17 Mar 2021, 11:12

    @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 18 Mar 2021, 13:38

      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 18 Mar 2021, 22:24 Reply Quote 0
      • M
        moin @devansh-webkul last edited by 18 Mar 2021, 22:24

        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 19 Mar 2021, 08:32

          Hi @moin,

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

          M 1 Reply Last reply 19 Mar 2021, 11:57 Reply Quote 0
          • M
            moin @devansh-webkul last edited by 19 Mar 2021, 11:57

            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 22 Mar 2021, 04:21

              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 23 Mar 2021, 09:09 Reply Quote 0
              • M
                moin @devansh-webkul last edited by 23 Mar 2021, 09:09

                @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
                • 7 months later
                • M
                  mreduar last edited by 11 Oct 2021, 16:31

                  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 12 Oct 2021, 06:13 Reply Quote 0
                  • anhngutalkfirst
                    anhngutalkfirst @mreduar last edited by 11 Oct 2021, 21:40

                    @mreduar have you found it out yet?

                    anhngutalkfirst

                    M 1 Reply Last reply 14 Oct 2021, 15:51 Reply Quote 0
                    • devansh-webkul
                      devansh-webkul last edited by 12 Oct 2021, 03:18

                      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 12 Oct 2021, 06:13

                        @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 14 Oct 2021, 15:51

                          @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 19 Oct 2021, 07:17

                            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
                            12 out of 15
                            • First post
                              12/15
                              Last post