Notifications

When something happens (like an HTTP error) you display a notification in the corner.

vue

<script setup>
import { ref } from "vue";

const notifsContainer = ref(null);

function addNotification(type) {
  console.log(notifsContainer);
  notifsContainer.value.addNotification({
    title: "Test Notification",
    text: "This is a test! Random number: " + Math.random(),
    type,
  });
}
</script>

<Notifications ref="notifsContainer" />
<Button color="primary" @click="addNotification('success')">Success</Button>
<Button color="highlight" @click="addNotification('warn')">Warning</Button>
<Button color="danger" @click="addNotification('error')">Error</Button>
<Button @click="addNotification('info')">Info</Button>

<script setup>
import { ref } from "vue";

const notifsContainer = ref(null);

function addNotification(type) {
  console.log(notifsContainer);
  notifsContainer.value.addNotification({
    title: "Test Notification",
    text: "This is a test! Random number: " + Math.random(),
    type,
  });
}
</script>

<Notifications ref="notifsContainer" />
<Button color="primary" @click="addNotification('success')">Success</Button>
<Button color="highlight" @click="addNotification('warn')">Warning</Button>
<Button color="danger" @click="addNotification('error')">Error</Button>
<Button @click="addNotification('info')">Info</Button>

Notifications ​

Notifications