vue-swift-alert

Stage: Personal.

Single Alerts

1
2<script lang="ts" setup>
3import {swiftAlert} from "vue-swift-alert";
4import SwiftAlert from "vue-swift-alert/src/swift-alert.vue";
5
6const loginMsg = swiftAlert('loginMsg');
7
8loginMsg.show() // Show alert content
9loginMsg.hide() // Hide alert content
10loginMsg.toggle() // Toggle alert content
11
12loginMsg.message('Your Login was successful.'); // Set message
13loginMsg.message(); // get message
14
15loginMsg.meta // Reactive alert meta data {message: string}
16loginMsg.meta.message = 'Your Login was successful.'; // Set message
17loginMsg.meta.message // Get message
18
19// Meta also serves as a reactive store for any data relating to this alert.
20loginMsg.meta.some_other_key = "Some other value";
21</script>
22
23<template>
24  <SwiftAlert id="loginMsg">
25    <span class="success">{{loginMsg.meta.message}}</span>
26    <!-- OR -->
27    <span class="success">{{loginMsg.message()}}</span>
28  </SwiftAlert>
29</template>

Multiple Alerts

1
2<script lang="ts" setup>
3import {swiftAlerts} from "vue-swift-alert";
4
5// Control Multiple Alerts
6const alerts = swiftAlerts("loginSuccess", "loginError");
7
8alerts.show('loginError')
9alerts.hide('loginSuccess')
10alerts.toggle('loginError')
11alerts.hideAll();
12alerts.showAll();
13
14// Destruct Single Swift Alert instances.
15const {loginError, loginSuccess} = swiftAlerts("loginSuccess", "loginError").toObject();
16
17loginError.show()
18loginSuccess.hide()
19
20// Destruct Single Swift Alert instances.
21const [error, success] = swiftAlerts("loginSuccess", "loginError").toArray();
22
23error.show()
24success.hide()
25
26alerts.show('loginError')
27</script>