How do you make modals with Vue.js?

Question

Vue.js

Tell me, please, what components and plugins for creating modal windows do you think are the most successful?
I tried a few pieces, was disappointed and decided to ask more experienced comrades.

I'm currently using vue-js-modal, but its pernicious desire to set a rigid size and position for the container, as well as the inability to use custom events, is very frustrating.

I expect three main things from the plugin:
1. The ability to display components;
2. Communication with the parent through props and events;
3. Ability to disable preset styles.

I liked how v-tooltip (v-popover component) works and would like to find an analogue

Code example

<v-popover
  offset="16"
>
  <!-- This will be the popover target (for the events and position) -->
  <button class="tooltip-target b3">Click me</button>

  <!-- This will be the content of the popover -->
  <template slot="popover">
    <input class="tooltip-content" v-model="msg" placeholder="Tooltip content" />
    <p>
      {{ msg }}
    </p>

    <!-- You can put other components too -->
    <ExampleComponent char="=" />
  </template>
</v-popover>

Answer 1

Somehow long ago I came to the conclusion that it is better to make dynamic modals, i.e. just register any component, and push it into the DOM
of the component itself

export default {
  name: 'modal-hello',
};

app.vue

<modal-root>
  сюда будут рендериться модалки
</modal-root>

and somewhere just to open

mounted() {
  this.$modal.open('modal-hello');
}

this way all modals will be at the body level, and will not clog the browser if they are not called, especially if they have a lot of components, and not just ok/no.

Answer 2

Use vuetify

Answer 3

Vuejs-modal
Best of what I have Used for a
long time
Works well , you can put in it both the name of the kit and dynamic import and just a string of html . Minimal styling! Exactly what is needed .

Answer 4

I use Vuetify - there is more than enough functionality for building dialogs.