Modals in Laravel Nova Tools

GeneralModal.vue

<template>
    <modal @modal-close="handleClose">
        <form
            @submit.prevent="handleConfirm"
            slot-scope="props"
            class="bg-white rounded-lg shadow-lg overflow-hidden"
            style="width: 460px"
        >
            <slot :uppercaseMode="uppercaseMode" :mode="mode">
                <div class="p-8">
                    <heading :level="2" class="mb-6">{{ __('General Modal') }}</heading>
                    <p class="text-80 leading-normal">{{__('General modal contents')}}</p>
                </div>
            </slot>

            <div class="bg-30 px-6 py-3 flex">
                <div class="ml-auto">
                    <button type="button" data-testid="cancel-button" dusk="cancel-general-button" @click.prevent="handleClose" class="btn text-80 font-normal h-9 px-3 mr-3 btn-link">{{__('Cancel')}}</button>
                    <button id="confirm-delete-button" ref="confirmButton" data-testid="confirm-button" type="submit" class="btn btn-default btn-danger">{{ __(uppercaseMode) }}</button>
                </div>
            </div>
        </form>
    </modal>
</template>

<script>
    export default {
        name: "GeneralModal",
        methods: {
            handleClose() {
                this.$emit('close')
            },

            handleConfirm() {
                this.$emit('confirm')
            },
        },

        /**
         * Mount the component.
         */
        mounted() {
            this.$refs.confirmButton.focus()
        },
    }
</script>

<style scoped>

</style>

Tool.vue

<template>
    <div>
        <button @click="openModal">{{__('Open Modal')}}</button>

        <portal to="modals">
            <transition name="fade">
                <general-modal
                    v-if="modalOpen"
                    @confirm="confirmModal"
                    @close="closeModal"
                />
            </transition>
        </portal>
    </div>
</template>

<script>
    import GeneralModal from './parts/modals/GeneralModal.vue';

    export default {
        props: ["resourceName", "resourceId", "field"],
        data() {
            return {
                modalOpen: false
            }
        },
        components: {
            GeneralModal
        },

        mounted() {
        },
        methods: {
            openModal() {
                this.modalOpen = true;
            },
            confirmModal() {
                this.modalOpen = false;
            },
            closeModal() {
                this.modalOpen = false;
            }
        }
    };
</script>

@bmoex thanks for the snippet. any idea how to trigger the auto close on click away functionality? I can see that Nova 4 native modals have it

@bmoex thanks for the snippet. any idea how to trigger the auto close on click away functionality? I can see that Nova 4 native modals have it

You really can't do that without modifying the nova code as it usually involves a click listener on the backdrop.

any sample for nova 5.19 and vue 3 any plugin or component avaibale now to solve modal popup in nova ?

@Yogeshkad I've not actively using Nova for the past couple years now, so sorry, can't really help with that, but I believe the previous concepts should still apply if not verbatim. You could start by looking at the current Modal component within Nova and work your way from there.