A very simple and lightweight notification toolbox.
- Install the package
npm i vue-flash3- Include the component once somewhere on the DOM
<style>
@import 'vue-flash3';
</style>
<template>
<Flash />
</template>
<script setup lang="ts">
import { Flash } from 'vue-flash3'
</script>- Show a message
import { instance as FlashI } from 'vue-flash3'
FlashI.add('That\'s a very nice success message')Clicking on the notification makes it disappear. It can also disappear after a duration if specified
There are 3 builtin types of messages: success (the default), error, info
import { instance as FlashI } from 'vue-flash3'
FlashI.add('That\'s a very nice success message', 'success')
FlashI.add('Oups some error has occured !', 'error')
FlashI.add('Some info won\'t hurt', 'info')However any other types can be defined simply by setting a color and an icon
A third optionnal param is here to set the duration in milliseconds after which the notification disappears. The default is 0 meaning the notification should stay
import { instance as FlashI } from 'vue-flash3'
FlashI.add('That\'s a very nice success message', 'success', 5000) // Will be shown 5 secondsThe add() function returns the notification so it can be removed programmatically with remove()
<template>
<button @click="remove">Remove</button>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { instance as FlashI } from 'vue-flash3'
const notif
onMounted(() => {
notif = FlashI.add('Removable notif')
})
function remove() {
FlashI.remove(notif)
}
</script>This default sass map can be overridden
$flash-colors: (
info: #018495,
error: #b13229,
success: #429344,
);Any type can be added and colors defined
Example
@use "vue-flash3/scss" with (
$flash-colors: (
toto: rgb(157, 32, 136),
)
);import { instance as FlashI } from 'vue-flash3'
FlashI.add('A Violet notification', 'toto')The icon part can contain anything by implementing the icons slot
Example
<template>
<Flash>
<template #icons="slotProps">
<IconInfo v-if="slotProps.type === 'info'" />
</template>
</Flash>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { Flash, instance as FlashI } from 'vue-flash3'
import IconInfo from './icons/info-circle-solid.svg'
onMounted(() => {
FlashI.add('Some info won\'t hurt', 'info')
})
</script>We are using vite-svg-loader here with an icon from Font-Awesome
Icons can also be disabled by simply setting the noicon prop
<Flash :noicon="true" />HTML content can be defined on the message (watch out for XSS)
FlashI.add('A Violet<br />notification', 'toto')Reactive content can also be used
import { onMounted, h } from 'vue'
import { Flash, instance as FlashI } from './flash'
function popFlash(e: Event) {
e.stopPropagation()
FlashI.remove(FlashI.notifications.value[0])
}
onMounted(() => {
FlashI.add({
render: () => h('div', [
'This is a reactive message ',
h('a', {
onClick: popFlash
}, 'now do something reactive')
]),
}, 'success')
})Here we are removing the first message of the stack at each click
<style lang="scss">
@use "vue-flash3/scss" with (
$flash-colors: (
toto: rgb(120, 137, 19),
)
);
</style>
<template>
<Flash>
<template #icons="slotProps">
<span v-if="slotProps.type === 'toto'">♣</span>
</template>
</Flash>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { Flash, instance as FlashI } from './flash'
onMounted(() => {
FlashI.add('<b>Nice title</b><div>We are feeling lucky today</div>', 'toto')
})
</script>To run the dev env, a Vite Vue app is contained into the app directory, Docker can be used to have it installed out of the box:
docker compose up -dThe dev application is now accessible on http://localhost