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;
});