Vue dynamic components

Vue3 only now

See online demo

See demo project repository

See demo project codesandbox

Table of Contents

• Vue dynamic components
  • Table of Contents
  • Install
  • Configuration
  • Easy start
  • Push method
  • Hide method
  • Named wrappers
  • Cases

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>