Take note: this is the rid function that is called within the code.
<script>
const rid = () => "rid_" + Array.from(crypto.getRandomValues(new BigUint64Array(2))).map(item => item.toString(36)).join("");
</script>
I am utilizing vue.js from CDN in an HTML file and also assigning Ids to <app> elements using jquery, as shown below:
<app>
</app>
<script>
(function() {
const app_rid = rid()
$("app").last().attr("id", app_rid)
createApp({}).mount("#"+app_rid)
});
</script>
In my code, I have two applications structured like this:
<!-- #app 1 -->
<app>
</app>
<script>
(function() {
const app_rid = rid()
$("app").last().attr("id", app_rid)
createApp({}).mount("#"+app_rid)
});
</script>
<!-- app #2 -->
<app>
</app>
<script>
(function() {
const app_rid = rid()
$("app").last().attr("id", app_rid)
createApp({}).mount("#"+app_rid)
});
</script>
The goal is to be able to call a method of app #1 from app #2 or any other potential apps like app #3, app #4, etc., in the future.
What app #1 does in my code is render bootstrap toasts, represented by the following code:
<component name="toast" class="visually-hidden">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="bi me-2" :class="[icon,'text-'+color]"></i>
<strong class="me-auto" :class="['text-'+color]">{{title}}</strong>
<small class="me-2">{{time}}</small>
<button type="button" class="btn btn-link text-danger-emphasis bi bi-x p-0" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">{{message}}</div>
</div>
</component>
<app>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<toast-component
v-for="(toast, index) in toasts"
:key="index"
:color="toast.color"
:icon="toast.icon"
:title="toast.title"
:time="toast.time"
:message="toast.message"
/>
</div>
</app>
...
The objective is to invoke the AddToast() method of this app from other apps.