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

Parameter	Type	Default	Description
className	string, array		Self-defined class names to pass through. There are 3 pre-defined classes: wk-info, wk-warn,wk-alert, to toast with different background color
horizontalPosition	string	center	Position horizontal of toast. There are 3 pre-defined positions: left, right and center
verticalPosition	string	bottom	Position vertical of toast. There are 2 pre-defined positions: top and bottom
duration	number	3000	The duration one toast will last, in milliseconds
closeable	boolean	false	true or false. If true, the toast can be closed manually
transition	string	slide-down	Built-in transitions: fade, slide-[up/down/left/right]. See also Transitions

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