vue-modal-toast-plugin

A modal toast plugin for mobile, integrated with Vue.js and Vuex.

Live demo

Features

• Only 9.0KB minified while 3.5KB gzipped
• Integrated with Vue.js as a plugin
• Responsive Design
• Show multiple toasts meanwhile
• Able to customize theme (with any scopes)
• Able to customize TTL for toast auto-hiding

Usage

Register the plugin first.

import Vue from 'vue'
import Vuex from 'vuex'
import vueModalToastPlugin from 'vue-modal-toast-plugin'

const store = new Vuex.Store({ strict: true })

Vue.use(vueModalToastPlugin, { store })

new Vue({ store })

Then include plugin css and add the holder tag to your root Vue node.

<template>
  <div id="app">
    <vue-toast-holder />
  </div>
</template>

<style>
@import '~vue-modal-toast-plugin/dist/vue-modal-toast-plugin.min.css';
</style>

Finally, use it anywhere.

Vue.extend({
  mounted () {
    this.$toast.open('Hello toast!')
  }
})

Credits

• Ionicons

License

MIT