Introduce parentContainer prop for other mountpoints than document.body

examples/App.vue

@@ -72,6 +72,15 @@
                 </div>
               </div>
 
+              <div class="form-group">
+                <label>Parent Container</label>
+                <div class="custom-control custom-checkbox">
+                  <input v-model="form.parentContainer" type="checkbox" class="custom-control-input"
+                          id="checkbox-parentContainer" true-value="#app" :false-value="null">
+                  <label class="custom-control-label" for="checkbox-parentContainer">Mount to #app instead of body</label>
+                </div>
+              </div>
+
               <hr>
 
               <button type="submit" class="btn btn-primary mr-3">Show notification</button>
@@ -116,6 +125,7 @@ export default {
         dismissible: true,
         queue: false,
         position: 'bottom-right',
+        parentContainer: null,
         onClick: this.onClick,
         onDismiss: this.onDismiss,
       },

src/js/Component.vue

@@ -65,6 +65,10 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
+    parentContainer: {
+      type: String,
+      default: null
+    }
   },
   data() {
     return {
@@ -83,8 +87,8 @@ export default defineComponent({
   },
   methods: {
     setupContainer() {
-      this.parentTop = document.querySelector('.v-toast.v-toast--top');
-      this.parentBottom = document.querySelector('.v-toast.v-toast--bottom');
+      this.parentTop = this.parentContainerElement.querySelector('.v-toast.v-toast--top');
+      this.parentBottom = this.parentContainerElement.querySelector('.v-toast.v-toast--bottom');
       // No need to create them, they already exists
       if (this.parentTop && this.parentBottom) return;
 
@@ -98,9 +102,8 @@ export default defineComponent({
         this.parentBottom.className = 'v-toast v-toast--bottom'
       }
 
-      const container = document.body;
-      container.appendChild(this.parentTop);
-      container.appendChild(this.parentBottom);
+      this.parentContainerElement.appendChild(this.parentTop);
+      this.parentContainerElement.appendChild(this.parentBottom);
     },
 
     shouldQueue() {
@@ -189,6 +192,9 @@ export default defineComponent({
           }
       }
     },
+    parentContainerElement() {
+      return this.parentContainer ? document.querySelector(this.parentContainer) : document.body
+    }
   },
   beforeUnmount() {
     eventBus.off('toast-clear', this.dismiss)

src/js/api.js

@@ -14,7 +14,9 @@ export const useToast = (globalProps = {}) => {
 
       const propsData = Object.assign({}, defaultProps, globalProps, options);
 
-      const instance = createComponent(ToastComponent, propsData, document.body);
+      const parentContainer = propsData.parentContainer ? document.querySelector(propsData.parentContainer) : document.body
+
+      const instance = createComponent(ToastComponent, propsData, parentContainer);
 
       return {
         dismiss: instance.ctx.dismiss