vue.js - How to make modal in vuejs 3 app with modal content in separate vue file?

Question

In @vue/cli 4.5.8 app I want to make modal looking at example : https://v3.vuejs.org/examples/modal.html

trying to set modal content in separate vue file and failed. I have file src/views/test2.vue :

<template>
    <div>
        showModal::{{ showModal }}<br>;
        <button id="show-modal" @click="showModal = true">Show Modal</button>
        <!-- use the modal component, pass in the prop -->
        <modal v-if="showModal" @close="showModal = false">
            <!--
              you can use custom content here to overwrite
              default content
            -->
            <template v-slot:header>
                <h3>custom header</h3>
            </template>
        </modal>
    </div>
</template>

<script>
    import { ref, onMounted, defineComponent /* , modal */ } from 'vue'
    import modal from '../views/Modal.vue'
    console.log('modal::')
    console.log(modal)
    
    export default defineComponent({
        name: 'test2Page',
        components: {
            modal
        },
        setup () {
            let showModal = ref(false)

            const test2OnMounted = async () => {
                console.log('test2OnMounted!!!::')
            }

            onMounted(test2OnMounted)

            return {
                showModal
            }
        } // setup() {

    })

</script>

and file with modal defined src/views/Modal.vue:

<transition name="modal">
    <div class="modal-mask">
        <div class="modal-wrapper">
            <div class="modal-container">
                
                <div class="modal-header">
                    <slot name="header">
                        default header
                    </slot>
                </div>
                
                <div class="modal-body">
                    <slot name="body">
                        default body
                    </slot>
                </div>
                
                <div class="modal-footer">
                    <slot name="footer">
                        default footer
                        <button class="modal-default-button" @click="$emit('close')">
                            OK
                        </button>
                    </slot>
                </div>
            </div>
        </div>
    </div>
</transition>

<style scoped>
    .modal-mask {
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: table;
        transition: opacity 0.3s ease;
    }

    .modal-wrapper {
        display: table-cell;
        vertical-align: middle;
    }

    .modal-container {
        width: 300px;
        margin: 0px auto;
        padding: 20px 30px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
        transition: all 0.3s ease;
        font-family: Helvetica, Arial, sans-serif;
    }

    .modal-header h3 {
        margin-top: 0;
        color: #42b983;
    }

    .modal-body {
        margin: 20px 0;
    }

    .modal-default-button {
        display: block;
        margin-top: 1rem;
    }

    /*
     * The following styles are auto-applied to elements with
     * transition="modal" when their visibility is toggled
     * by Vue.js.
     *
     * You can easily play with the modal transition by editing
     * these styles.
     */

    .modal-enter {
        opacity: 0;
    }

    .modal-leave-active {
        opacity: 0;
    }

    .modal-enter .modal-container,
    .modal-leave-active .modal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

</style>

As result I have page opened without errors, but clicking on button I got error :

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Component is missing template or render function. 
  at <Modal key=0 onClose=fn > 
  at <Test2Page onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy?{…} > > 
  at <RouterView> 
  at <App>

Which format is valid?

"core-js": "^3.6.5",
"vue": "^3.0.0",

Thanks!

question from:https://stackoverflow.com/questions/65932877/how-to-make-modal-in-vuejs-3-app-with-modal-content-in-separate-vue-file

Answer 1

You Modal component should be wrapped by a template tag :

<template>
<transition name="modal">
    <div class="modal-mask">
        ....
    </div>
</transition>
</template>

<style scoped>
  ...
</style>