Skip to content

jerrywu001/vue3-toastify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Requirements

vue version >=3.2.0

Installation

npm install --save vue3-toastify
# yarn add vue3-toastify

Demo

A demo is worth a thousand words

ε€‡η”¨εœ°ε€

Document

Check the documentation to get you started!

ε€‡η”¨εœ°ε€

The gist

<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>

<script>
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

export default {
   name: "App",
   setup() {
    const notify = () => {
      toast("Wow so easy !", {
        autoClose: 1000,
      }); // ToastOptions
    }
    return { notify };
   }
};
</script>

Init/Update Global Props

// main.ts
import Vue3Toastify, { type ToastContainerOptions } from 'vue3-toastify';

app.use(Vue3Toastify, {
  autoClose: 3000,
} as ToastContainerOptions);
// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "vue3-toastify/global"
    ]
  }
}

or

updateGlobalOptions({ rtl: true });

toast.success('Wow so easy!');

nuxt

A nuxt demo

  • plugins/vue3-toastify.ts
import Vue3Toastify, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Toastify, { autoClose: 1000 });

  return {
    provide: { toast },
  };
});
  • demo.vue
<script setup>
// import { toast } from 'vue3-toastify';

nextTick(() => {
  if (process.client) {
    useNuxtApp().$toast('notify after nextTick');
  }
});

const notify = () => {
  useNuxtApp().$toast.info('toastify success');
  // or
  // toast.info('toastify success');
};
</script>

<template>
  <button @click="notify">notify by click</button>
</template>

Using the ES Module Build

jsfiddle demo

<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.css" rel="stylesheet" />
  <title>Using the ES Module Build</title>
</head>

<body>
  <div id="app">
    <button @click="notify">show toast</button>
    <span>&nbsp;&nbsp;</span>
    <button @click="dismiss">dismiss</button>
  </div>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
  </script>
  <script type="module">
    import { createApp } from 'vue'
    import { toast } from 'https://unpkg.com/[email protected]/dist/index.mjs'

    createApp({
      data() {
        return {
          toastId: '',
          toastIds: [],
        };
      },
      methods: {
        notify() {
          const toastId = toast.info(
            'hello',
            {
              rtl: true,
              limit: 3,
              position: toast.POSITION.BOTTOM_CENTER,
            },
          );
          this.toastIds.push(toastId);
        },
        dismiss() {
          console.log(this.toastIds)
          this.toastIds.forEach(id => {
            toast.remove(this.toastId);
          });
          /* toast.clearAll() */;
        },
      }
    }).mount('#app')
  </script>
</body>

</html>

Sponsors

Special Sponsor

special sponsor appwrite