vue3-toast-single

vue3-toast-single

A toast plugin for vue3. Support composition API.

See the example.

Note:

Issue/PR is welcomed, I'll response as soon as possible.

If you like this plugin, can give a star.

Usage

install

npm install vue3-toast-single --save

Quickstart

// import 
import Toast from 'vue3-toast-single'
import 'vue3-toast-single/dist/toast.css'

const app = createApp(App);

app.use(Toast, { verticalPosition: "bottom", duration: 1500 });
app.mount("#app");

// Usage

{
  // ....
 methods: {
    clickHandler() {
      this.$wkToast('A toast.');
    },
  },
  // ...
}

{
  // ...
  setup() {
        const toast = Vue.inject("WKToast");
        const clickHandler = () => {
          toast("A toast.");
        };
        return {
          clickHandler,
        };
      },
  // ...
}

Config

toast or $wkToast takes 2 parameter: (message, [options])

Options

Styling

Besides minimum styling, vue3-toast-single try not to be opinionated about the appearance. It is a simply a div(class="wk-wrapper") wrapped a span(class="wk-content"). Apply your css freely with them or with your own classes passed in as className.

config example

// global
app.use(Toast, { verticalPosition: "bottom", duration: 1500 });

// local
this.$wkToast('A toast', {
  className: ['my-toast', 'toast-warning'],
  horizontalPosition: 'right',
  verticalPosition: 'top',
  duration: 3000,
  transition: 'transition'
})

TODO

• Add a queue mode
• emoji

License

MIT