Getting started

Theming alerts

Alert definition

<script setup>
    import { AlertHandler } from '@byloth/vuert';
</script>

<template>
    <AlertHandler v-slot="{ alert, isOpen }">
        <div v-if="isOpen"
             class="alert"
             :class="`alert--${alert.type}`">
            {{ alert.message }}
        </div>
    </AlertHandler>
</template>

<style scoped>
    .alert { /* [...] */ }

    .alert--info { background-color: #D1ECF1; }
    .alert--success { background-color: #D4EDDA; }
    .alert--warning { background-color: #FFF3CD; }
    .alert--error { background-color: #F8D7DA; }
    .alert--question { background-color: #E2E3E5; }
</style>

Emit the alert

Composition APIs

import { useVuert } from '@byloth/vuert';

// [...]

const vuert = useVuert();

const emitAlert = () => vuert.emit({
    type: 'info',
    message: "This is a themed Vuert alert!",
    timeout: 2500
});

Option APIs

import { defineComponent } from 'vue';

export default defineComponent({

    // [...]

    methods: {
        emitAlert() {
            this.$vuert.emit({
                type: 'info',
                message: "This is a themed Vuert alert!",
                timeout: 2500
            });
        }
    }
});