yarn add portal-vue

frontend/package.json

@@ -45,6 +45,7 @@
     "jest-canvas-mock": "^2.3.1",
     "jest-environment-jsdom-sixteen": "^2.0.0",
     "particles-bg-vue": "1.2.3",
+    "portal-vue": "^2.1.7",
     "prettier": "^2.2.1",
     "qrcode": "^1.4.4",
     "regenerator-runtime": "^0.13.7",

frontend/src/plugins/dashboard-plugin.js

@@ -2,7 +2,7 @@ import GlobalComponents from './globalComponents'
 import GlobalDirectives from './globalDirectives'
 
 import Toasted from 'vue-toasted'
-
+import PortalVue from 'portal-vue'
 // vue-bootstrap
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
@@ -25,6 +25,7 @@ export default {
     Vue.use(BootstrapVue)
     Vue.use(IconsPlugin)
     Vue.use(VueMoment)
+    Vue.use(PortalVue)
     Vue.use(FlatPickr)
     Vue.use(Loading)
     Vue.use(VueApollo)

frontend/src/views/Pages/SendOverview.vue

@@ -27,6 +27,8 @@
       </gdd-send>
       <hr />
     </b-container>
+    <b-button variant="secondary" @click="makeToast('secondary')" class="mb-2">Secondary</b-button>
+   
   </div>
 </template>
 <script>
@@ -72,6 +74,13 @@ export default {
     },
   },
   methods: {
+     makeToast(variant = null) {
+        this.$bvToast.toast('Toast body content', {
+          title: `Variant ${variant || 'default'}`,
+          variant: variant,
+          solid: true
+        })
+      },
     setTransaction(data) {
       this.transactionData = { ...data }
       this.currentTransactionStep = 1