vue-simple-snackbar

A snackbar for vue2+ projects

Usage no npm install needed!

<script type="module">
  import vueSimpleSnackbar from 'https://cdn.skypack.dev/vue-simple-snackbar';
</script>

README

vue-simple-snackbar

Build

Install

$ npm i --save vue-simple-snackbar

Usage in components

// app.vue

<template>
    <div>   
        <SimpleSnackbar />
    </div>
</template>

<script>
import Vue from 'vue'
import VueSimpleSnackbar from 'vue-simple-snackbar'

Vue.use(VueSimpleSnackbar)

export default {
    mounted() {
        setTimeout(() => {
            this.$simpleSnackbar.show({
                message: 'Hooray!',
                timeToHide: 30000,
                primaryAction: {
                    description: `I'm a button`,
                    action: () => alert('hello'),
                },
            })
        }, 1000)
    }
}
</script>

Usage in other files

// my_service.js
import {simpleSnackbar} from 'vue-simple-snackbar'

export default {
    doSomething() {
        simpleSnackbar.show({
            message: 'Hooray!',
            primaryAction: {
                description: `I'm a button`,
                action: () => alert('hello'),
            },
        })
    }
}

Methods

this.$simpleSnackbar.show({
    message: 'Hooray!',
    primaryAction: {
        description: `I'm a button`,
        action: () => alert('hello')
    }
})

this.$simpleSnackbar.hide()

License

MIT