vue-toastification

When upgrading to v2.x, note the following breaking changes:

• Vue Version Support: Vue 2 support has been dropped in favor of Vue 3.
• Accessing Toasts: this.$toast is no longer available. You must use the useToast composable to obtain the toast interface. The object returned by useToast is identical to the old this.$toast and contains the same methods.
• Transition Duration: The transitionDuration option is deprecated due to changes in Vue's transition system. To control transition timing, you should instead change or override the transition classes.

To use Vue Toastification with Vue 3, install the @next version using your preferred package manager.

Note: This version is exclusively compatible with Vue 3+. If you are using Vue 2, you must install the v1 branch instead.

$ yarn add vue-toastification@next
$ npm install --save vue-toastification@next

To use Vue Toastification, add it as a plugin to your Vue application. You must also import the default CSS file. You can pass an optional options object to set global defaults during registration.

For TypeScript users, use the PluginOptions type for the options object.

import { createApp } from "vue";
import Toast from "vue-toastification";
// Import the CSS or use your own!
import "vue-toastification/dist/index.css";

const app = createApp(...);

const options = {
    // You can set your default options here
};

app.use(Toast, options);

Use provideToast within a component's setup() function to create a new Vue Toastification instance that is only available to that component and its children. This is useful for scoping toast containers to specific parts of your application. Child components can then access this instance using useToast() without arguments.

<!-- Parent component -->
<script>
  import { provideToast } from "vue-toastification";

  export default {
    setup() {
      provideToast({
        timeout: 1000
      })
    }
  }
</script>

<!-- Child components -->
<script>
  import { useToast } from "vue-toastification";
  import { defineComponent } from "vue";

  export default defineComponent({
    setup() {
      // This will access the instance provided by the parent
      const toast = useToast()
    }
  })
</script>

Because the plugin uses a global event bus by default, you can use useToast() anywhere in your application (e.g., in a Vuex store) without being inside a component.

// store.js
import { createStore } from 'vuex'
import { useToast } from 'vue-toastification'

const toast = useToast()

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
      toast.success("incremented!")
    }
  }
})

To use vue-toastification in your Vue application, register the VueToastificationPlugin during the app installation phase. You can optionally pass a PluginOptions object to configure global settings.

If you set shareAppContext: true in your options, the plugin will automatically capture the current Vue App instance and use it for context sharing.

You can create independent Vue Toastification instances by using createToastInterface. Each call creates a new Vue App and a separate toast container. This allows you to manage multiple independent toast systems. The function accepts the same PluginOptions used during plugin registration.

import { createToastInterface } from "vue-toastification";

// Create a default instance
const myInterface = createToastInterface();

// Create an instance with specific options
const myInterface = createToastInterface({
  timeout: 1000
});

Inside a Vue component's setup() function, call useToast() to get the toast interface. You can then trigger different types of toasts (success, info, error, warning) or a default toast. Options passed to a specific toast call will override the global plugin options.

<script>
  import { useToast } from "vue-toastification";

  export default {
    setup() {
      // Get toast interface
      const toast = useToast();

      // Use it!
      toast("I'm a toast!");

      // or with options
      toast.success("My toast content", {
        timeout: 2000
      });

      // Make it available inside methods
      return { toast }
    },

    methods: {
      myMethod() {
        // Since you returned `toast` from setup(), you can access it now
        this.toast.info("I'm an info toast!");
      }
    }
  }
</script>

To create a toast, provide content and an optional options object.

Note: Individual toast options supersede global Plugin Registration settings.

Content Formats

You can pass the following as content:

• String
• Vue Component
• JSX
• Object (for component rendering):
  • component: The Vue Component or JSX to render.
  • props: Object of non-reactive props passed to the component.
  • listeners: Object of event handlers for component emissions.

Toast Options

Commonly used options for individual toasts:

• id: Unique identifier (String or Number).
• type: success, error, default, info, or warning.
• position: Override global position.
• onClick: Callback (closeToast) => void executed when clicked.
• onClose: Callback executed when the toast is closed.
• timeout: Override auto-dismissal time.
• icon: Override icon settings.