Open modal in Blade when clicking Vuejs button

Question

In my laravel Vue application, I have a vue with a datatable to display some user records.

Above my data table there is a button for adding records.

Once the user clicks the button, it should open a modal.

But my modal is in blade.

The following is the vue code of my button (view-docs.vue),

<open-overlay direction-from="top" identifier="addDocumentModal">
            <cs-button>
                Add document
            </cs-button>
        </open-overlay>

My modal .blade Yes,

<form
    method="post"
    action="{{ route('dashboard.profile.otherDocuments.store.manual', ['locale' => app()->getLocale()]) }}"
    enctype="multipart/form-data"
    ref="addDocumentModal"
>
    @csrf

    <overlay direction-from="top" identifier="addDocumentModal" open="{{ isset($add_another_documents) ? 'true' : null }}" >
        <div class="cs--dashboard-edit-modal w-full h-full absolute bottom-0 ">
            <div class="cs--modal-content flex">
                <div class="relative w-full">
                    <div class="cs--reveal-container bg-white w-full rounded shadow-soft mr-8 h-full">
                        <!--Modal title-->
                        <div class="flex justify-between items-center border-b border-certstyle-border px-10 py-3">
                            <h3 class="text-2xl leading-10 text-certstyle-titles font-bold my-2 flex items-center">
                                <span class="border-l-2 border-certstyle-orange inline-block h-6 mr-2"></span>
                                <span>{{ __('pages/other-documents.add-document') }}</span>
                            </h3>
                            <div class="h-full flex items-center cs--reveal transition-all duration-500"></div>
                        </div>

                        <div>
                            <!--Modal content-->
                            <div class="bg-certstyle-background-light w-full h-full px-10 pt-8 pb-10">

                                <!--Name-->
                                <div class="mb-5 relative z-30">
                                    <p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/other-documents.name') }}</p>

                                    <div class="h-12 relative z-10">
                                        <input  value="{{ old('name') }}" name="name" id="add_name_input" type="text" class=" form-input w-full relative z-10" >
                                    </div>

                                    <validator identifier="addDocument" name="add_name_input" selector="id" rules="{{$validations['required']}}"></validator>
                                </div>

                                <div class="flex justify-between">

                                    <!--Completed at-->
                                    <div class="w-1/2 mr-2">
                                        <p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/add-certificate.date-of-issue') }}</p>
                                        <validator-v2 identifier="addDocument"  name="issued_at" rules="{{$validations['required']}}">
                                            <div class="h-12">
                                                <cs-date-picker value="{{ old('issued_at') != null ? Carbon\Carbon::parse(old('issued_at'))->format('Y-m-d') : '' }}"  id="minimumDate" name="issued_at"></cs-date-picker>
                                            </div>
                                       </validator-v2>
                                    </div>

                                    <!--Expiration date-->
                                    <div class="w-1/2 ml-2">
                                        <p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/add-certificate.expiry-date') }}</p>
                                        <validator-v2 identifier="addDocument" name="expires_at" depends-on-name="does_not_expire"  :rules="{{$validations['expiry_date_must_be_same_or_after']}}">
                                            <div class="h-12">
                                                <cs-date-picker value="{{ old('expires_at') != null ? Carbon\Carbon::parse(old('expires_at'))->format('Y-m-d') : '' }}" name="expires_at"></cs-date-picker>
                                            </div>
                                        </validator-v2>
                                    </div>

                                </div>

                                <div class="flex justify-between">

                                    <!--Completed at-->
                                    <div class="w-1/2 mr-2">
                                        <div class="mb-4">
                                            <label class="inline-flex items-center focus:outline-none checkbox--container mt-2">
                                                <input type="checkbox" name="does_not_expire">
                                                <span class="checkbox--checkmark flex items-center justify-center ">
                                                    <svg class="icon text-certstyle-orange feather feather-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                        <polyline points="20 6 9 17 4 12"></polyline>
                                                    </svg>
                                                </span>
                                                <span style="bottom: 4px;" class="text-certstyle-text font-normal text-sm relative">{{ __('pages/add-certificate.document-does-not-expire') }}</span>
                                            </label>
                                        </div>
                                    </div>

                                </div>

                                <!--Upload document-->
                                <div class="mb-1">
                                    <dashboard-input-label identifier="document" :settings="{help: true, helpDirection: 'left'}">
                                        {{ __('pages/add-certificate.upload-document') }}
                                        <template slot="helpText">
                                            Maximum filesize is {{ config('file-upload.max_file_size')  }} MB.
                                            The default allowed file extensions are: pdf, jpeg and png.
                                        </template>
                                    </dashboard-input-label>
                                    <validator-v2 identifier="addDocument" name="document_file" :rules="{{$validations['required']}}">
                                        <custom-file-upload :max-upload-file-size="{{ config('file-upload.max_file_size')  }}" name="document_file"></custom-file-upload>
                                    </validator-v2>
                                </div>

                                <!--Certificate number-->
                                <div class="mb-1">
                                    <p class="inline-block text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/other-documents.document-number') }}</p>
                                    <div class="relative">
                                        <validator-v2 identifier="addDocument" name="document_number" depends-on-name="no_document_number" :rules="{{$validations['required_unless']}}">
                                            <input  value="{{ old('document_number') }}" name="document_number" id="add_document_number_input" type="text" class=" form-input w-full relative z-10" >
                                            <input-annotation identifier="document_number">
                                                {{ __('pages/other-documents.fill-document-number-1') }}
                                            </input-annotation>
                                            <label class="inline-flex items-center focus:outline-none checkbox--container mt-2">
                                                <input type="checkbox" name="no_document_number">
                                                <span class="checkbox--checkmark flex items-center justify-center">
                                                        <svg class="icon text-certstyle-orange feather feather-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                            <polyline points="20 6 9 17 4 12"></polyline>
                                                        </svg>
                                                    </span>
                                                <span style="bottom: 4px;" class="text-certstyle-text font-normal text-sm relative">{{ __('pages/other-documents.document-has-no-document-number') }}</span>
                                            </label>
                                        </validator-v2>
                                    </div>
                                </div>

                            </div>

                            <!--Modal actions-->
                            <div class="flex justify-between border-certstyle-border bg-white border-t px-8 py-8 relative ">
                                <close-overlay identifier="addDocumentModal">
                                    <div class="text-certstyle-text-light border-certstyle-border rounded border px-6 py-2  mr-4 hover:bg-certstyle-background cursor-pointer">{{ __('pages/add-certificate.cancel') }}</div>
                                </close-overlay>

                                <div class="flex justify-right flex justify-right space-x-5">

                                    <document-submit-button
                                        caption="{{ __('pages/add-certificate.save-and-close') }}"
                                        buttonclass="bg-white text-certstyle-orange border-certstyle-orange border rounded  font-bold px-6 py-2  cursor-pointer"
                                        name="saveAndClose"
                                        identifier="saveAndClose"
                                    ></document-submit-button>



                                    <document-submit-button
                                        caption="{{ __('pages/add-certificate.save-and-add-new') }}"
                                        buttonclass="text-white bg-gradient-br-orange rounded border font-bold px-6 py-2  cursor-pointer"
                                        name="saveAndNew"
                                        identifier="saveAndNew"
                                    ></document-submit-button>


                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </overlay>
</form>

How to open this modal when I click vue button?

Answer 1

Use jingle events on buttons and call functions. The function that links the router.js file in this function.

In router.js, the function should look like this,

{
    path: '/yourpath which is in api.php or web.php have',
    name: 'same as path name to remember easily',
    meta: { 
        requiresAuth: true,           //authentication require
        roles: ['superadmin','admin'] //roles to be define
    },
    component: () => import('../your vue file path/myFile.vue'),
},

After that, create a route in the api.php file and call the controller's function. View your blade file code in the controller as shown below.

view('.blade file name');

It’s done, thank you.