Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Overview

Mosha Vue Toastify

Build Status

A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

English | 简体中文

alt text

Talk is cheap, show me the demo

Try it out in the playground in the documentation

Features

  • Super easy to setup! try follow this
  • Swipe to close
  • Support for Composition API
  • Written in typescript, full typescript support
  • Super light weight
  • Define behavior per toast
  • Fun progress bar to display remaining time
  • A lot more coming!

Installation

With NPM:

$ npm install mosha-vue-toastify

With Yarn:

$ yarn add mosha-vue-toastify

The gist

<template>
  <button @click="toast">Toast it!</button>
</template>
<script lang='ts'>
import { defineComponent } from 'vue'
// import the library
import { createToast } from 'mosha-vue-toastify';
// import the styling for the toast
import 'mosha-vue-toastify/dist/style.css'

export default defineComponent({
  name: 'HelloWorld',
  setup () {
    const toast = () => {
        createToast('Wow, easy')
    }
    return { toast }
  }
})
</script>

Configuration

The createToast function accepts 2 arguments:

  • First argument:

    • It can be just a string or a object like this: { title: 'some title', description: 'some good description'}. By the way, description now accepts html, for more customization, we recommand trying out the custom component approach
    • It can also accept a Vue 3 component or a VNode if you need more customization, e.g.
      // without props
      import { createToast } from 'mosha-vue-toastify';
      import CustomizedContent from "./CustomizedContent.vue";
      import 'mosha-vue-toastify/dist/style.css';
    
      export default defineComponent({
        setup () {
          const toast = () => {
              createToast(CustomizedContent)
          }
          return { toast }
        }
      })
      // with props
      import { createToast, withProps } from 'mosha-vue-toastify';
      import CustomizedContent from "./CustomizedContent.vue";
      import 'mosha-vue-toastify/dist/style.css';
    
      export default defineComponent({
        setup () {
          const toast = () => {
              createToast(withProps(CustomizedContent, { yourFavProp: 'bruh' }))
          }
          return { toast }
        }
      })
  • Second argument: the second argument is an options object.

    name type default description
    type 'info', 'danger', 'warning', 'success', 'default' 'default' Give the toast different styles and icons.
    timeout number 5000 How many ms you want the toggle to close itself? Note: passing -1 to the timeout will stop the modal from closing.
    position 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center' 'top-right' Where do you want the toast to appear?
    showCloseButton boolean true Do you wanna show the close button ?
    showIcon boolean false Do you wanna show the icon ?
    transition 'bounce', 'zoom', 'slide' 'bounce' Which animation do you want?
    hideProgressBar boolean false Do we wanna hide the fancy progress bar?
    swipeClose boolean true Allows the user swipe close the toast
    toastBackgroundColor string default color Customize the background color of the toast.
    onClose function N/A This function will be called at the end of the toast's lifecycle
  • Programatically closing The createToast function returns an object that contains a close funtion that allows the user to programatically dismiss the toast. See below:

        import { createToast } from 'mosha-vue-toastify';
        import CustomizedContent from "./CustomizedContent.vue";
        import 'mosha-vue-toastify/dist/style.css';
    
        export default defineComponent({
          setup () {
            const toast = () => {
                // This close function can be used to close the toast
                const { close } = createToast(CustomizedContent)
                // close()
            }
    
            return { toast }
          }
        })

    To clear all the toasts, use the clearToasts function. See below

        import { createToast, clearToasts } from 'mosha-vue-toastify';
        import CustomizedContent from "./CustomizedContent.vue";
        import 'mosha-vue-toastify/dist/style.css';
    
        export default defineComponent({
          setup () {
            const clear = () => {
              // clears all the toasts
              clearToasts()
            }
    
            return { clear }
          }
        })

Support

Give this project a if you like it. Any suggestions are welcome!

Comments
  • Scroll-blocking touchstart event

    Scroll-blocking touchstart event

    Any time I use a toast, I get this warning in the console;

    [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

    Would it be possible to put the event as passive so this can be used in production? :)

    opened by ParogDev 3
  • Error Nuxt 3 on production only

    Error Nuxt 3 on production only

    Hello 👋 I have this error on production only after nuxt build && nuxt start on Nuxt 3

    "nuxt": "3.0.0-rc.8"
    "mosha-vue-toastify": "^1.0.23",
    
    [nuxt] [request error] [unhandled] [500] Named export 'createToast' not found. The requested module 'mosha-vue-toastify' is a CommonJS module, which may not support all module.exports as named exports.
    CommonJS modules can always be imported via the default export, for example using:
    
    import pkg from 'mosha-vue-toastify';
    const { createToast } = pkg;
    

    Any ideas thx ?

    opened by NaosFr 2
  • Toasts overlap each other when done in a 'for'-ish type loop

    Toasts overlap each other when done in a 'for'-ish type loop

    When doing a 'for'-ish loop (for, forEach, etc.) through an AJAX's response errors and making a toast for each one, they overlap each other on the screen instead of cascading below each other. A temporary workaround I've found is to wrap the createToast function in a setTimeout of only 1 millisecond, but a permanent fix within the library would be much appreciated.

    opened by aaron-romanick 2
  • [Vue3 + Vite] Uncaught TypeError: can't access property

    [Vue3 + Vite] Uncaught TypeError: can't access property "innerWidth", o4.currentTarget is null

    From time to time when I create toast in my component with this code:

    setup() {
        const signin = (alias, token) => {
          client.auth.me(alias, token) // <-- Axios call
            .then(_ => createToast(`Dashboard accessed as ${alias}`, { position: 'bottom-right' }))
            // [...]
         }
    }
    

    I'm getting this exception in console:

    15:14:31.517 Uncaught TypeError: can't access property "innerWidth", o4.currentTarget is null
        o3 mosha-vue-toastify.es.js:1
        o2 mosha-vue-toastify.es.js:1
        setTimeout handler*E/< mosha-vue-toastify.es.js:1
        EventListener.handleEvent* mosha-vue-toastify.es.js:1
        callWithErrorHandling runtime-core.esm-bundler.js:6990
        callWithAsyncErrorHandling runtime-core.esm-bundler.js:6999
        __weh runtime-core.esm-bundler.js:2270
        flushPostFlushCbs runtime-core.esm-bundler.js:7191
        render2 runtime-core.esm-bundler.js:5142
        render runtime-dom.esm-bundler.js:1489
        Z mosha-vue-toastify.es.js:1
        Q mosha-vue-toastify.es.js:1
        signin LoginModal.vue:52
        promise callback*signin LoginModal.vue:52
        3 LoginModal.vue:16
        callWithErrorHandling runtime-core.esm-bundler.js:6990
        callWithAsyncErrorHandling runtime-core.esm-bundler.js:6999
        invoker runtime-dom.esm-bundler.js:347
        addEventListener runtime-dom.esm-bundler.js:297
        patchEvent runtime-dom.esm-bundler.js:315
        patchProp runtime-dom.esm-bundler.js:379
        mountElement runtime-core.esm-bundler.js:4105
        processElement runtime-core.esm-bundler.js:4068
        patch runtime-core.esm-bundler.js:3988
        mountChildren runtime-core.esm-bundler.js:4187
        mountElement runtime-core.esm-bundler.js:4096
        processElement runtime-core.esm-bundler.js:4068
        patch runtime-core.esm-bundler.js:3988
        mountChildren runtime-core.esm-bundler.js:4187
        mountElement runtime-core.esm-bundler.js:4096
        processElement runtime-core.esm-bundler.js:4068
        patch runtime-core.esm-bundler.js:3988
        mountChildren runtime-core.esm-bundler.js:4187
        processFragment runtime-core.esm-bundler.js:4355
        patch runtime-core.esm-bundler.js:3984
        mountChildren runtime-core.esm-bundler.js:4187
        mountElement runtime-core.esm-bundler.js:4096
        processElement runtime-core.esm-bundler.js:4068
        patch runtime-core.esm-bundler.js:3988
        mountChildren runtime-core.esm-bundler.js:4187
        mountElement runtime-core.esm-bundler.js:4096
        processElement runtime-core.esm-bundler.js:4068
        patch runtime-core.esm-bundler.js:3988
        componentUpdateFn runtime-core.esm-bundler.js:4536
        run reactivity.esm-bundler.js:160
        setupRenderEffect runtime-core.esm-bundler.js:4655
        mountComponent runtime-core.esm-bundler.js:4438
    

    It's quite random, but it happens when the toast disappears.

    opened by dzikoysk 2
  • Programmatically close the message

    Programmatically close the message

    I am working on a blockchain project, and I need a loading toast message when the user is waiting for the transaction writes into the chain. Then when the transaction is completed, the callback can trigger the close event and pop up a success toast message. Can you add a feature to support this scenario? Thanks!

    opened by kenso312 2
  • Close only after user action.

    Close only after user action.

    Is there a way to make the toast persistent? I want it to be close only after the users clicks on it or swipes!

    I currently have a big timeout number but I don't like that solution.

    Thanks!

    opened by kamnakis 1
  • Mobile responsive

    Mobile responsive

    Toast took almost full width on mobile (iphone 6,7,8). Have a propose to include such styles to the .mosha__toast class out of the box:

    .mosha__toast {
           width: 85%;
           max-width: 400px;
           margin-right: 9px;
       }
    
    opened by worlddeleteRin 1
  • Vue2 Integration

    Vue2 Integration

    Hi,

    Thank you for that good project. Because of use in my other project which is ( Vue 2 👎 ) I want to integrate that project also to vue2. I can create a pull request for it. Will you accept that?

    opened by erdemgonul 0
  • Blank white toast if use Object for first and second arg

    Blank white toast if use Object for first and second arg

    Hi, why it's blank white toast if I use 1st and 2nd arg

    self.$moshaToast({
    	title: 'Error',
    	description: `
    		<span class="text-sm">${response.data.error.detail}</span>
    	`,
    }, {
    	type: 'error',
    	showIcon: true,
    	hideProgressBar: true,
    })
    

    image

    opened by erwinyusrizal 0
  • Does not display components when building

    Does not display components when building

    According to the readme of the library, a component can be used to display notification toast messages and when using a component in a development environment it is displayed as follows

    image

    But when I build the project, and upload it to my production environment it looks like this

    image

    I don't understand why if the build is built without errors

    opened by gaidygomez 1
Releases(v1.0.23)
Owner
Baidi Liu
Too fast to live, too young to die.
Baidi Liu
Light speed setup for MEVN(Mongo Express Vue Node) Apps

Light speed setup for MEVN stack based web-apps Chat: Telegram Donate: PayPal, Open Collective, Patreon A CLI tool for getting started with the MEVN s

madlabsinc 791 Dec 14, 2022
🌊 A flexible and fun JavaScript file upload library

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user

pqina 13.2k Jan 7, 2023
A progress bar plugin for Vite.

vite-plugin-progress Display with progress bar when building ?? Install npm i vite-plugin-progress -D # yarn yarn add vite-plugin-progress -D # pn

Jeddy Gong 137 Dec 17, 2022
A plugin that can help you create project friendly with Vue for @vue/cli 4.5

vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally

null 2 Jan 6, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in yo

Архипцев Евгений 63 Dec 30, 2022
A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Marc Duiker 6 Jun 25, 2022
Veloce: Starter template that uses Vue 3, Vite, TypeScript, SSR, Pinia, Vue Router, Express and Docker

Veloce Lightning-fast cold server start Instant hot module replacement (HMR) and dev SSR True on-demand compilation Tech Stack Vue 3: UI Rendering lib

Alan Morel 10 Oct 7, 2022
NativeScript empowers you to access native api's from JavaScript directly. Angular, Vue, Svelte, React and you name it compatible.

NativeScript empowers you to access native APIs from JavaScript directly. The framework currently provides iOS and Android runtimes for rich mobile de

NativeScript 22k Jan 4, 2023
:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | 简体中文 | 日本語 | Spanish SPONSORED BY 活动服务销售平台 客户消息直达工作群 Introduction vue-element-admin is a production-ready front-end solution for admin inter

花裤衩 80.1k Dec 31, 2022
:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:

vuera NOTE: This project is looking for a maintainer! Use Vue components in your React app: import React from 'react' import MyVueComponent from './My

Aleksandr Komarov 4k Dec 30, 2022
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

雪月欧巴 84 Nov 28, 2022
The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.

AnimXYZ animxyz.com AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless

Ingram Projects 2.1k Jan 2, 2023
Everything you wish the HTML