How to use with vue 3?

[SaulMoonves]

help!

[eino]

I'd be interested also.

Edit: dist files are not up-to-date and need to be rebuild. The issue is that the build command is broken.
There is an error about UglifyJsPlugin that can be solved by using the optimization.minimize config instead of this plugin.

However then I get other errors about vue-loader

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

[Maronato]

If you need Vue 3 support, you might want to check out Vue Toastification v2, which offers similar features and native Vue 3 support.

[terax6669]

@shakee93 it's been a while can we get some sort of eta or a roadmap? Would really like to use this in my upcoming project, I've put off toasts for now but I'll have to implement them eventually.

[chriscdn]

Toasted works by extending the Vue.prototype. This breaks in Vue3, but you can work around it as follows:

const prevPrototype = Vue.prototype

Vue.prototype = {}

Vue.use(Toasted, {/*...*/})

Object.assign(Vue.config.globalProperties, Vue.prototype)

Vue.prototype = prevPrototype

[volarname]

any news about vue 3 version?

[parrotsoft]

Hello, I am modifying the index.js file in line number 12 and now it works

Vue.toasted = Vue.config.globalProperties.$toasted = Toast;

they must repackage the package

[prd-y-nguyen]

Toasted works by extending the Vue.prototype. This breaks in Vue3, but you can work around it as follows:

const prevPrototype = Vue.prototype

Vue.prototype = {}

Vue.use(Toasted, {/*...*/})

Object.assign(Vue.config.globalProperties, Vue.prototype)

Vue.prototype = prevPrototype

This works 🎉

[ankurk91]

One can use this one
https://github.com/hoppscotch/vue-toasted

it has same API

[mkiselyow]

This works for me:

// my injectToasted.js file
import Toasted from 'vue-toasted'
const TOASTED_OPTIONS = { className: 'toast', duration: 1000 }

export default function injectToasted (component, globalProperties) {
  const mockVue = {
    use (plugin, args) {
      plugin.install(this, args)
    },
    component
  }
  mockVue.prototype = {}
  mockVue.use(Toasted, TOASTED_OPTIONS)
  Object.assign(globalProperties, mockVue.prototype)
}

// my main.js file
...
const app = createApp(App)
injectToasted(app.component, app.config.globalProperties)
...

[victor-rioba]

Toasted works by extending the Vue.prototype. This breaks in Vue3, but you can work around it as follows:

const prevPrototype = Vue.prototype

Vue.prototype = {}

Vue.use(Toasted, {/*...*/})

Object.assign(Vue.config.globalProperties, Vue.prototype)

Vue.prototype = prevPrototype

For nuxt 3:

/plugins/toast.client.ts

import VueToasted from "vue-toasted";

export default defineNuxtPlugin((nuxtApp) => {

  const prevPrototype = nuxtApp.vueApp.prototype;
  nuxtApp.vueApp.prototype = {};

  nuxtApp.vueApp.use(VueToasted, {
    /* options */
  });

  Object.assign(
    nuxtApp.vueApp.config.globalProperties,
    nuxtApp.vueApp.prototype
  );
  nuxtApp.vueApp.prototype = prevPrototype;
});

[acabreragnz]

In our project, we migrated from vue-toasted to vue3-toastify, and it has been an excellent decision. I highly recommend it as it is straightforward to customize with CSS variables.

If you need to support the old syntax to avoid refactoring all your components, you can create a plugin like this:

// @/main.ts

// * ToastPlugin must be imported before our styles
import { ToastPlugin } from '@/lib/toast/toast.plugin.ts';

app.use(ToastPlugin);

// @/lib/toast/toast.plugin.ts

import { appToast } from '@/lib/toast/toast.ts';

export const ToastPlugin = {
  install(app: App) {
    /**
     * @deprecated Use `this.$appToast` within a component or our appToast lib directly.
     * If you are inside a component, prefer using `this.$appToast` for accessing the toast functionality.
     * For external usage or utility files, import `appToast` directly from the toast library.
     */
    app.config.globalProperties.$toasted = {
      global: {
        showSuccess({ message }: { message: string }) {
          appToast.error(message);
        },
        showError({ message }: { message: string }) {
          appToast.error(message);
        },
       ... any other method you use in your components
      },
      clear() {
        appToast.clearAll();
      },
    };

    app.config.globalProperties.$appToast = appToast;
    app.provide('appToast', appToast);
  },
};

// '@/lib/toast/toast.ts';

import { h, defineAsyncComponent } from 'vue';
import { toast as toastify, updateGlobalOptions, type ToastOptions as ToastifyOptions } from 'vue3-toastify';

import '@/lib/toast/toast.css';

const ToastErrorIcon = defineAsyncComponent(() => import('@/components/toast/ToastErrorIcon.vue'));
const ToastSuccessIcon = defineAsyncComponent(() => import('@/components/toast/ToastSuccessIcon.vue'));

updateGlobalOptions({
  limit: 3,
});

export type ToastOptions = {
  /**
   * Delay in ms to close the toast. If set to false, the notification needs to be closed manually
   */
  autoClose?: number | boolean;
};

export type AppToast = {
  error: (message: string, options?: ToastOptions) => void;
  success: (message: string, options?: ToastOptions) => void;
  clearAll: () => void;
};

const DEFAULT_OPTIONS: ToastifyOptions = {
  transition: toastify.TRANSITIONS.SLIDE,
  position: toastify.POSITION.TOP_CENTER,
  theme: 'colored',
};

/**
 * A wrapper around `vue3-toastify` for displaying toast notifications.
 *
 * @example
 * // Display a success toast
 * appToast.success('Operation successful!', { autoClose: 2000 });
 *
 * @example
 * // Display an error toast
 * appToast.error('An error occurred!', { autoClose: false });
 *
 * @example
 * // Clear all toast notifications
 * appToast.clearAll();
 */
export const appToast = {
  /**
   * Display a success toast notification.
   *
   * @param {string} message - The message to display in the toast.
   * @param {ToastOptions} [options={}] - Optional toast configuration.
   *
   * @example
   * appToast.success('Data saved successfully',
   *  { autoClose: 3000 }
   * );
   */
  success(message: string = 'Success!', options: ToastOptions = {}) {
    toastify.success(message, {
      ...DEFAULT_OPTIONS,
      autoClose: 3000,
      icon: h(ToastSuccessIcon),
      ...options,
    });
  },

  /**
   * Display an error toast notification.
   *
   * @param {string} message - The message to display in the toast.
   * @param {ToastOptions} [options={}] - Optional toast configuration.
   *
   * @example
   * appToast.error('Failed to save data',
   *  { autoClose: false }
   * );
   */
  error(message: string = 'Oops.. Something Went Wrong..', options: ToastOptions = {}) {
    toastify.error(message, {
      ...DEFAULT_OPTIONS,
      // ? Ask Mar to keep the error permanent
      autoClose: 5000,
      icon: h(ToastErrorIcon),
      ...options,
    });
  },

  /**
   * Clear all toast notifications currently displayed.
   *
   * @example
   * appToast.clearAll();
   */
  clearAll() {
    toastify.clearAll();
  },
};