Please enable / Bitte aktiviere JavaScript!
Veuillez activer / Por favor activa el Javascript![ ? ]
And how do you make modal windows on Vue.js? - Q&A

And how do you make modal windows on Vue.js?

0 like 0 dislike

Which components and plug-ins to create modal windows do you find most successful?
Tried a few pieces, was disappointed and decided to ask more experienced friends.

Now I use vue-js-modal, but his destructive desire to set a rigid size and position for the container, as well as the inability to use custom eventors is very frustrating.

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

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

example of code

  <!-- 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" />
      {{ msg }}

    <!-- You can put other components too -->
    <ExampleComponent char="=" />
asked by (1.3k points) | 40 views

1 Answer

0 like 0 dislike

A long time ago I came to the conclusion that it's better to make dynamic modulators, i.e. just register any component and shove it into DOM.

component itself

export default {
  name: 'modal-hello',


  this is where the mods will be rendered.

and just open it somewhere

mounted() {

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

answered by (700 points)
Welcome to Bug-code Q&A, where you can ask questions and receive answers from other members of the community.

24.8k questions

46.2k answers


12.7k users

24,788 questions
46,220 answers
12,718 users