title: How to: Vue3 composition API plugin with component rendering (confirmation windows, toasts)
body: <p>I am trying to write several Vue3 plugins for my own usage via composition API.</p>
  <p>Let's talk about the confirmation window plugin.</p>
  <p>How I want to use it:</p>
  <pre><code>const confirm = inject('confirm');
  
  async function handleDelete(item) {
      const isConfirmed = await confirm({ 
          title: 'Delete entity', 
          description: 'Are you sure you want to delete this entity?',
      });
  
      if (isConfirmed) {
          // Business logic / service call here
      }
  }
  </code></pre>
  <p>It will be used many times in many components.</p>
  <p>So, I create a folders <code>plugin -&gt; confirm</code>.
  Then I create 2 files:</p>
  <p>index.js</p>
  <pre><code>import Component from './component';
  
  export default {
      install(app, options = {}) {
          const handler = function(options) {
              // How to render imported component?
              return new Promise((resolve) =&gt; {
                  // Pass 'resolve' into component and resolve it with 3 values: true, false, null. 
                  // Similar to click Yes, click No, close window.
              });
          };
  
          app.provide('confirm', handler);
      },
  };
  </code></pre>
  <p>component.vue</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;modal-title&quot;&gt;{{ title }}&lt;/div&gt;
      &lt;div class=&quot;modal-body&quot;&gt;{{ description }}&lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;button @click=&quot;handleConfirm&quot;&gt;Confirm&lt;/Button&gt;
          &lt;button @click=&quot;handleReject&quot;&gt;Reject&lt;/Button&gt;
          &lt;button @click=&quot;handleClose&quot;&gt;Close&lt;/Button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'Confirm',
          components: {
              Modal,
              Button,
          },
          props: {
              title: {
                  type: String,
                  default: '',
              },
              description: {
                  type: String,
                  default: '',
              },
              resolve: {
                  type: Function,
              },
          },
          setup(props) {
  
              function handleClose() {
                  props.resolve(null);
                  // Remove somehow rendered dialog
              }
  
              function handleConfirm() {
                  props.resolve(true);
                  // Remove somehow rendered dialog
              }
  
              function handleReject() {
                  props.resolve(false);
                  // Remove somehow rendered dialog
              }
  
              return {
                  handleClose,
                  handleConfirm,
                  handleReject,
              };
          },
      };
  &lt;/script&gt;
  </code></pre>
  <p>Maybe anyone knows how to finish this plugin, or someone can suggest a better way for such plugins?</p>