vue-dynamic-components

    1.0.10 • Public • Published

    Vue dynamic components

    Vue3 only now

    See online demo

    See demo project repository

    See demo project codesandbox

    Table of Contents

    Install

    $ npm install vue-dynamic-components --save
    
    $ yarn add vue-dynamic-components

    Configuration

    import Vue from 'vue';
    import VueDynamicComponents from 'vue-dynamic-components';
    Vue.use(VueDynamicComponents);

    Easy start

    1. Add the <dynamic-components-wrapper /> where you want (as default to root in App.vue)
    2. Where you want import needed vue component
    3. Call this.$dc.push(YourVueComponent);
    4. All components called from push has $hide() method, use it of emit('hide') for close your component from it.

    Push method

    push(component, options, wrapperName)

    Name Type Description
    component Vue component Your imported Vue component Required
    options Object
    wrapperName String The name of the wrapper in which you want to display the component

    Options object

    Property name Type Descrition
    props Object Props that will be passed to your component
    events Object Event handlers that will be passed to your component
    queue String If you want your components to appear in turn, specify the queue
    type String If you want the same components not to appear multiple times, specify the same type
    animation String Each component is wrapped in a transition tag, name the animation if you want
    refs Array If you want to close component use refs to get id

    Hide method

    hide(id, wrapperName)

    Name Type Description
    id Number Component unique id, use object.refs to get it Required
    wrapperName String The name of the wrapper which displays the component

    Named wrappers

    Use <dynamic-components-wrapper name="wrapperName"/>

    Cases

    Use different wrappers for toast and modals

    App.vue

    <template>
        <div id="app">
            <button @click="showToast">Show toast</button>
            <button @click="showModal">Show modal</button>
            <dynamic-components-wrapper name="modals" class="modals-wrapper-class" />
            <dynamic-components-wrapper name="toasts" class="toasts-wrapper-class" />
        </div>
    </template>
    import ToastComponent from '@/components/ToastComponent';
    import ModalComponent from '@/components/ModalComponent';
    
    export default {
        methods: {
            showToast() {
                this.$dc.push(ToastComponent, {}, 'toasts');
            },
            showModal() {
                this.$dc.push(ModalComponent, {}, 'modals');
            }
        }
    };

    Use refs for hiding showed modals

    App.vue

    <template>
        <div id="app">
            <button @click="showModal">Show modal</button>
            <button @click="hideAllModal">Hide modals</button>
            <dynamic-components-wrapper />
        </div>
    </template>
    import ModalComponent from '@/components/ModalComponent';
    
    export default {
        data() {
            return {
                modals: []
            };
        },
        methods: {
            showModal() {
                this.$dc.push(ModalComponent, { refs: this.modals });
            },
            hideAllModal() {
                this.modals.forEach(modal => {
                    this.$dc.hide(modal.id);
                });
            }
        }
    };

    Use props, events, queue and animation

    App.vue

    <template>
        <div id="app">
            <button @click="showModal">Show modal</button>
            <dynamic-components-wrapper />
        </div>
    </template>
    import ModalComponent from '@/components/ModalComponent';
    
    export default {
        methods: {
            showModal() {
                this.$dc.push(ModalComponent, {
                    props: { text: 'Dynamic modal' },
                    events: {
                        selected(value) {
                            console.log(value);
                        }
                    },
                    queue: 'modals',
                    animation: 'fade'
                });
            }
        }
    };
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.5s;
    }
    
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    For example modal component

    ModalComponent.vue

    <template>
        <div class="wrapper" @click.self="$hide()">
            <div class="dialog">
                <div>{{ text }}</div>
                <div>
                    <button @click="$emit('selected', true)">Yes</button>
                    <button @click="$emit('selected', false)">No</button>
                </div>
            </div>
        </div>
    </template>
    export default {
        props: {
            text: {
                type: String,
                default: 'Dynamic component'
            }
        }
    };
    <style scoped>
    .wrapper {
        left: 0;
        top: 0;
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .dialog {
        width: 300px;
        height: 300px;
        border-radius: 5px;
        cursor: default;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    </style>

    Install

    npm i vue-dynamic-components

    DownloadsWeekly Downloads

    1

    Version

    1.0.10

    License

    ISC

    Unpacked Size

    11.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar