Vue-flare NPM | npm.io

Vue Flare - notifications for Vue 3 and Nuxt 3

The goal was to create simple, easy to set up notifications for Vue 3 in a beautiful design that no app or website would be ashamed of.

Check out the demo vue-flare.web.app

Installation

# npm
npm install --save vue-flare

# yarn
yarn add vue-flare

Setup with Vue 3

// main.ts

import "vue-flare/dist/style.css"
import VueFlare from "vue-flare"

createApp(App).use(VueFlare, {
  position: 'top-right',
  animation: 'fade-in',
  borderRadius: false,
  backdropFilterBlur: false,
  duration: 5000,
  maxWidth: '400px',
  displayFromTop: true,
  duplicationEnabled: true,
}).mount('#app')

Setup with Nuxt 3

// plugins/vue-flare.ts

import VueFlare from "vue-flare"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueFlare)
})

// nuxt.config.ts

export default defineNuxtConfig({
  css: ["~/node_modules/vue-flare/dist/style.css"]
})

Usage

<!-- App.vue -->

<template>
    <div>
        {{ activeFlares }}
        {{ activeSettings }}
        <Flares />
        <div>
            <button @click='show'>show</button>
            <button @click='hide'>hide</button>
            <button @click='setNewSettings'>set new settings</button>
        </div>
    </div>
</template>

// App.vue

import { computed, inject } from "vue";
import { Flares, FlareInterface } from "vue-flare"

// Access to the plugin
const flare = inject('flare') as FlareInterface

const activeFlares = computed(() => flare.flares.value)
const activeSettings = computed(() => flare.settings.value)

function show () {
    // Examples
    flare.success({ title: "Success" })
    flare.info({ title: "Info", message: "Message" })
    flare.warning({ title: "Info", message: "Message", duration: 10000 })
    flare.error({ id: '78dd0a2b', title: "Info", message: "Message" })

    // All the settings
    flare.info({
        id: '78dd0a2c',  
        title: "Info", 
        message: "Message",
        duration: 20000,
        hasIcon: false,
        hasLoading: false,
        closable: false
    })
}

function hide () {
    flare.hide('78dd0a2b')
}

function setNewSettings () {
    flare.setSettings({
        position: 'bottom-right',
        animation: 'fade-right',
        borderRadius: true,
        backdropFilterBlur: true,
        duration: 3000,
        maxWidth: '600px',
        displayFromTop: false,
        duplicationEnabled: false
    })
}

You can even use global property $flare

<button @click='$flare.success({
    id: "78dd0a2b",
    title: "Info",
    message: "Message"
  })'>
show
</button>

Customization

You can use custom component for notifications inside the <Flares /> component

<!-- App.vue -->

<template>
  <div>
    <Flares>
      <Flare
          v-for="{ id, type, title, message, duration, hasIcon, hasLoading, closable } of flare.flares.value"
          :key="`flare-${id}`"
          :type="type"
          :title="title"
          :message="message"
          :duration="duration"
          :has-icon="hasIcon"
          :has-loading="hasLoading"
          :closable="closable"
          animation="fade-in"
          border-radius
          backdrop-filter-blur
          @close="flare.hide(id)"
      />
    </Flares>
  </div>
</template>

Custom styles

// main.scss

.flares {
  &-top-left {}
  &-top-right {}
  &-top-center {}
  &-bottom-left {}
  &-bottom-right {}
  &-bottom-center {}
}

.flare {
  &-border-radius {}
  &-backdrop-filter-blur {}
  &-has-icon {}
  
  &-animation-fade-in {}
  &-animation-fade-top {}
  &-animation-fade-right {}
  &-animation-fade-bottom {}
  &-animation-fade-left {}
  
  &-loading {}
  &-icon {}
  &-title {}
  &-message {}
  &-close {
    &:hover {}
    svg {}
  }
  
  &-success {
    // light - #1fa55a
    // dark - #0e5f38
    &.flare-backdrop-filter-blur {}
    .flare-icon, .flare-close {}
    .flare-loading {}
  }
  
  &-info {
    // light - #1f6fe0
    // dark - #10488a
    &.flare-backdrop-filter-blur {}
    .flare-icon, .flare-close {}
    .flare-loading {}
  }
  
  &-warning {
    // light - #ee8d31
    // dark - #c34916
    &.flare-backdrop-filter-blur {}
    .flare-icon, .flare-close {}
    .flare-loading {}
  }
  
  &-error {
    // light - #dc3055
    // dark - #851d41
    &.flare-backdrop-filter-blur {}
    .flare-icon, .flare-close {}
    .flare-loading {}
  }
}

Props

`<Flare />`

<Flare
    type="success"
    title="Title"
    message="Message"
    animation="fade-in"
    border-radius="false"
    backdrop-filter-blur="false"
    has-icon
    has-loading
    closable
    :duration="5000"
/>

Name	Description	Type	Values	Default
`type`*	Type	String	`success` `info` `warning` `error`	—
`title`*	Title	String	—	—
`animation`	Animation	String	`fade-in` `fade-top` `fade-right` `fade-bottom` `fade-left`	`fade-in`
`message`	Message	String	—	`''`
`duration`*	Duration of the flare	Number	—	—
`borderRadius`	Border radius on the flare	Boolean	—	`false`
`backdropFilterBlur`	Blurred background on the flare	Boolean	—	`false`
`hasIcon`	Visible icon	Boolean	—	`true`
`hasLoading`	Visible loading bar	Boolean	—	`true`
`closable`	Visible close icon	Boolean	—	`true`

`flare.setSettings({ ...options })`

flare.setSettings({
    position: 'top-right',
    animation: 'fade-in',
    borderRadius: false,
    backdropFilterBlur: false,
    duration: 5000,
    maxWidth: '400px',
    displayFromTop: true,
    duplicationEnabled: true
})

Name	Description	Type	Values	Default
`position`	Position of the flares	String	`top-left` `top-right` `top-center` `bottom-left` `bottom-right` `bottom-center`	`top-right`
`animation`	Animation	String	`fade-in` `fade-top` `fade-right` `fade-bottom` `fade-left`	`fade-in`
`borderRadius`	Border radius on the flare	Boolean	—	`false`
`backdropFilterBlur`	Blurred background on the flare	Boolean	—	`false`
`duration`	Duration of the flares in miliseconds	Number	—	`5000`
`maxWidth`	Max width of flares in `px` or `%`	String	—	`400px`
`displayFromTop`	Adds new notifications from the top, otherwise from the bottom	Boolean	—	`true`
`duplicationEnabled`	Allows you to have multiple notifications of the same type in the stack	Boolean	—	`true`