How to work with reusable modal ?

@MohamedTammam I am using optional api and tryed this but it does not work. Now i cant open modals.

 data(){
            return {
                showEditModel: false,
                showCreateModel: false,

i have copied your ecample buttons also v-model

@Leon012 Is there any errors in the console?

Sorry, in your modal component you need to add the following

<div v-if="modelValue">
        <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 v-if="$slots.modalTitle" class="modal-title" id="exampleModalLabel">
                        <slot name="modalTitle"/>
                    </h5>
                    <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <slot></slot>
                </div>
                <div v-if="$slots.modalSubmitBtn" class="modal-footer">
                    <button @click.prevent="submit" type="button" data-mdb-dismiss="modal" class="btn btn-primary">
                        <slot name="modalSubmitBtn" />
                    </button>
                </div>
                </div>
            </div>
        </div>    
    </div>

props: ['modelValue'],
emits: ['update:modelValue'],
methods: {
	closeModal() {
		this.$emit('update:modelValue', false);
	}
}

@MohamedTammam There is no error. But still does not work. I think closeModal() is function to close my modal. But first problem : Modals does not open first.

@Leon012 Even after updating modal component?

@MohamedTammam yes. It is the same

@Leon012 In your component model add this :class selctor

<div class="modal fade" id="modal" :class="{show: modelValue}" ...

Sorry, I didn't use bootstrap like that for a while.

@MohamedTammam No it does not work yet. I try to add but no difference

@Leon012 Can you please share the modal component now or even a repo if available.

@MohamedTammam I dont have a repo but this is the modal component

<template>
    <div v-if="modelValue">
        <div class="modal fade" id="modal" :class="{show: modelValue}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 v-if="$slots.modalTitle" class="modal-title" id="exampleModalLabel">
                        <slot name="modalTitle"/>
                    </h5>
                    <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <slot></slot>
                </div>
                <div v-if="$slots.modalSubmitBtn" class="modal-footer">
                    <button @click.prevent="submit" type="button" data-mdb-dismiss="modal" class="btn btn-primary">
                        <slot name="modalSubmitBtn" />
                    </button>
                </div>
                </div>
            </div>
        </div>    
    </div>
</template>

<script>
    export default {

        props: ['modelValue'],
        emits: ['update:modelValue'],

        methods: {
            submit() {
                this.$emit('submit_changers')
            },

            closeModal() {
                this.$emit('update:modelValue', false);
            }
        }
    }
</script>

also i tryed to change <Modal @submit_changers="updateUser" v-if="showEditModel"> on the page when i call modal but it does not work. Modal does not open

@Leon012 What's the Vue version are you using?

@MohamedTammam "vue": "^2.6.12",

@Leon012 Oh, here's Vue2 version

<template>
    <div v-if="value">
        <div class="modal fade" id="modal" :class="{show: value}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
           <!-- ... -->
        </div>    
    </div>
</template>

<script>
    export default {
        props: ['value'],
        methods: {
            submit() {
                this.$emit('submit_changers')
            },
            closeModal() {
                this.$emit('input', false);
            }
        }
    }
</script>

@MohamedTammam not work again

modal cmponent
<template>
    <div v-if="value">
        <div class="modal fade" id="modal" :class="{show: value}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 v-if="$slots.modalTitle" class="modal-title" id="exampleModalLabel">
                        <slot name="modalTitle"/>
                    </h5>
                    <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <slot></slot>
                </div>
                <div v-if="$slots.modalSubmitBtn" class="modal-footer">
                    <button @click.prevent="submit" type="button" data-mdb-dismiss="modal" class="btn btn-primary">
                        <slot name="modalSubmitBtn" />
                    </button>
                </div>
                </div>
            </div>
        </div>    
    </div>
</template>

<script>
    export default {
        props: ['value'],
        methods: {
            submit() {
                this.$emit('submit_changers')
            },
            closeModal() {
                this.$emit('input', false);
            }
        }
    }
</script>

maybe the problem is here

                                <button type="button" class="btn  btn-sm btn-secondary"  @click="editUser(user.id); showEditModel = true">Edit</button>

<!-- Edit Modal -->
                    <Modal @submit_changers="updateUser" v-model="showEditModel">
                        <template v-slot:modalTitle >
                            Reusable Edit Modal
                        </template>
                        <form id="signin" class="form-horizontal validate-form">
                            <div class="form-group">                
                                <input v-model="editname" id="name" type="text" class="form-control" placeholder="Name">        
                            </div>        

                            <div class="form-group">  
                                <input v-model="editemail" id="email" type="email" class="form-control" placeholder="Email">
                            </div> 

                            <div class="form-group">  
                                <input v-model="password" id="email" type="password" class="form-control" placeholder="Password">
                            </div>
                            
                            <select v-model="editrole" class="form-select">
                                <option v-for="role in roles" :value="role.id">{{role.title}}</option>
                            </select>
                        </form>
                        <template v-slot:modalSubmitBtn >
                            Edit User
                        </template>
                    </Modal>

data(){
            return {
                showEditModel: false,

@Leon012 It Might be worth updating your Vue version if possible

@Leon012 I can't actually figure out more without testing it myself.

You can try to create sandbox with that two components so I can test https://codesandbox.io/framework/vue

@Elliot_putt I don't think he needs to upgrade just for showing a modal.

@Elliot_putt I have upgraded to vue 3.0 but now i have some other problems with my component registration i think

ERROR in ./resources/js/components/workers/WorkersComponent.vue       
Module build failed (from ./node_modules/vue-loader/lib/index.js):    
TypeError: Cannot read properties of undefined (reading 'parseComponent')

component registration

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
import Vue from 'vue';
import VueProgressBar from 'vue-progressbar'

window.Vue = require('vue').default;

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
const VueProgressBarOptions = {
    color: '#695CFE',
    failedColor: '#87111d',
    thickness: '5px',
    transition: {
        speed: '0.2s',
        opacity: '0.6s',
        termination: 300
    },
    autoRevert: true,
    location: 'top',
    inverse: false
};
Vue.use(VueProgressBar, VueProgressBarOptions);

Vue.component('workers', require('./components/workers/WorkersComponent.vue').default);



/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});

@MohamedTammam Anyway, I was thinking to migrate on newest version also for other features. But now i see a problem with my registration component

@Leon012 Add display: block to the modal

Here's a working example https://codesandbox.io/s/hopeful-https-z5oyoo