Vue-coe-feedback NPM

Install yarn add vue-coe-feedback or npm i add vue-coe-feedback

Configuration

import Vue from 'vue'

import { VueCoeFeedback } from 'vue-coe-feedback'

Vue.use(VueCoeFeedback, store, options)

how to use?

inside the component:

this.$feedback.add({ type, message, highlighted })
or
this.$feedback.remove({ type, message, highlighted })

inside the store:

actions: {
  SOME_ACTION: ({ commit, dispatch }) => {
    ...
    dispatch('FEEDBACKS_ADD', { type, message, highlighted })
    or
    dispatch('FEEDBACKS_REMOVE', { type, message, highlighted })
    ...
  }
}

options type

info
success
error

Example

<template>
  <div id="app">
    <coe-feedback @close="feedback => $feedback.remove(feedback)" :feedbacks="$feedback.list" />

    <button @click="onSucces">show feedback success</button>
    <button @click="onInfo">show feedback info</button>
    <button @click="onError">show feedback error</button>

    <button @click="onCoe">set coe</button>
  </div>
</template>

<script>
import { CoeFeedback } from 'vue-coe-feedback'

export default {
  components: { CoeFeedback },
  
  methods: {
    onSucces () {
      this.$feedback.add({ type: 'success', message: 'A sua compra foi', highlighted: 'aprovada!' })
    },

    onInfo () {
      this.$feedback.add({ type: 'info', message: 'INFO' })
    },

    onError () {
      this.$feedback.add({ type: 'error', message: 'ERROR' })
    },

    onCoe () {
      this.$store.dispatch('COE', { type: 'success', message: 'COÉ MANÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉ!' })
    }
  }
}
...
</script>