How use with Nuxt 3?

[MaxCpp]

I try add vue-toasted in Nuxt 3:

import { defineNuxtPlugin } from '#app';
import Toasted from 'vue-toasted';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Toasted);
})

But I have error in console:

How it's right to do? I know about @nuxtjs/toast but it doesn't work with Nuxt 3.

[viveksharma619]

Facing same issue

[nick-nds]

Same issue with Vue 3. I think it will not work with Vue 3.

[victor-rioba]

import VueToasted from "vue-toasted";

export default defineNuxtPlugin((nuxtApp) => {
  // necessary to make it work with Vue 3 and Nuxt 3
  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;
});

[AlexGnatko]

import VueToasted from "vue-toasted";

export default defineNuxtPlugin((nuxtApp) => {
  // necessary to make it work with Vue 3 and Nuxt 3
  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;
});

Thanks, that finally worked. For those who don't get what's going on, that's a source code of a plugin. To call a toast from a component or a page:

const nuxtApp = useNuxtApp();
...
nuxtApp.vueApp.toasted.success("OK");