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?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.