title: Placing Modals in Child Components in Vue.js
body: <h1>Background</h1>
  
  <p>Typically, when using modals within Vue.js components, it is the norm to create a reusable <code>modal</code> component, and then control the state of this component using events from child components.</p>
  
  <p>For example, consider the following code:</p>
  
  <h2><code>App.vue</code></h2>
  
  <pre><code>&lt;div id="app"&gt;
  
      &lt;!-- Main Application content here... --&gt;
  
      &lt;!-- Place any modal components here... --&gt;
      &lt;modal ref="ContactForm"&gt;&lt;/modal&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <h2><code>ChildComponent.Vue</code></h2>
  
  <p>To open the modal from a child component, we would simply trigger the following event:</p>
  
  <pre><code>bus.$emit('open-modal', 'ContactForm');
  </code></pre>
  
  <p><strong>Note 1:</strong> <code>bus</code> is a separate Vue instance that allows events to be fired between all components regardless of their relation.</p>
  
  <p><strong>Note 2:</strong> I have intentionally left out my <code>modal</code> component code as it is not relevant to the question.</p>
  
  <h1>The Problem</h1>
  
  <p>Whilst the above works absolutely fine, there is one key issue...</p>
  
  <p>In order to add a <code>modal</code> to my application, instead of placing the <code>modal</code> component within the child component that references it, I have to place <strong>all</strong> modals within <code>App.vue</code> as this ensures they are as high up the DOM tree as possible (to ensure they appear above all content).</p>
  
  <p>As a result, my <code>App.vue</code> has the potential to end up looking like this:</p>
  
  <pre><code>&lt;div id="app"&gt;
  
      &lt;!-- Main Application content here... --&gt;
  
      &lt;!-- Place any modal components here... --&gt;
      &lt;modal ref="SomeModal1"&gt;&lt;/modal&gt;
      &lt;modal ref="SomeModal2"&gt;&lt;/modal&gt;
      &lt;modal ref="SomeModal3"&gt;&lt;/modal&gt;
      &lt;modal ref="SomeModal4"&gt;&lt;/modal&gt;
      &lt;modal ref="SomeModal5"&gt;&lt;/modal&gt;
      &lt;modal ref="SomeModal6"&gt;&lt;/modal&gt;
      &lt;modal ref="SomeModal7"&gt;&lt;/modal&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>It would be much cleaner to be able to place the <code>modal</code> component within the DOM of the child component.</p>
  
  <p>However, in order to ensure that the modal appears above all content within the DOM (specifically items with a set <code>z-index</code>), I can't see an alternative to the above...</p>
  
  <p>Can anyone suggest a way in which I can ensure my modals will work correctly, even if they are placed within the child components?</p>
  
  <h1>Potential Solution</h1>
  
  <p>I did think about the following solution but it seems very dirty...</p>
  
  <ol>
  <li>Fire <code>open-modal</code> event</li>
  <li>Move the relevant <code>modal</code> component to the parent <code>App.vue</code> component</li>
  <li>Show the modal</li>
  </ol>
  
  <h1>Additional Information</h1>
  
  <p>In case the above isn't clear, I am trying to avoid defining <strong>all</strong> modals in my <code>App.vue</code> component, and allow defining of my modals within any child component.</p>
  
  <p>The reason I am not able to do this, at present, is because the HTML for the modals must appear as high in the DOM tree as possible in order to ensure they appear above all content.</p>