Vuetify cannot load default value in Vue-Toastification

Question

What I tried was vue-toastification using a custom component and some Vuetify components in toast. I created the repository using npm create vuetify@latest and installed the library npm i vue-toastification@latest. Then used the plug-in:

<code>// main.ts

//Toastification
import Toast, { POSITION } from "vue-toastification";
import "vue-toastification/dist/index.css";

const app = createApp(App);

const options = {
  shareAppContext: true, // From https://github.com/Maronato/vue-toastification#access-global-components-and-plugins-inside-toasts
  position: POSITION.BOTTOM_CENTER,
};

registerPlugins(app);

app.use(Toast, options);
</code>

Then I tried calling toast using the following code:

<code>// store/error.ts

import { useToast } from "vue-toastification";
import MyComponent from "@/components/MyComponent.vue";

const toast = useToast();

export const useErrorStore = defineStore("error", () => {
  function locationError() {
    toast(MyComponent);
  }
});
</code>

In my component:

<code>// components/MyComponent.vue

<template>
  <div class="container">
    <v-container>
      <v-row>
        <v-col> Alert example </v-col>
        <v-col>
          <v-btn @click="reload">Reload</v-btn>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script setup lang="ts">
function reload() {
  if (typeof window !== "undefined") {
    window.location.reload();
  }
}
</script>
</code>

I call it from the App.vue file:

<code>// App.vue

<template>
  <v-app>
    <v-main>
      <v-btn @click="loc">Location Error</v-btn>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { useErrorStore } from "./store/error";

const errorStore = useErrorStore();

function loc() {
  errorStore.locationError();
}
</script>
</code>

But at runtime, when I click the button, I get the following error:

[Vue warn]: injection "Symbol(vuetify:defaults)" not found.
  at <VContainer>
  at <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> >
  at <VtToast key="_default00" position="bottom-center" draggable=true ... >
  at <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move" ... >
  at <VtTransition transition="Vue-Toastification__bounce" class="Vue-Toastification__container bottom-center" >
  at <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …} position="bottom -center" >

[Vue warn]: Unhandled error during execution of setup function
  at <VContainer>
  at <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> >
  at <VtToast key="_default00" position="bottom-center" draggable=true ... >
  at <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move" ... >
  at <VtTransition transition="Vue-Toastification__bounce" class="Vue-Toastification__container bottom-center" >
  at <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …}position="bottom-center" >

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <VContainer> 
  at <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > 
  at <VtToast key="_default00" position="bottom-center" draggable=true  ... > 
  at <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move"  ... > 
  at <VtTransition transition="Vue-Toastification__bounce" class="Vue-Toastification__container bottom-center" > 
  at <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …} position="bottom-center" >

Uncaught (in promise) Error: [Vuetify] Could not find defaults instance
    at injectDefaults (defaults.ts:28:24)
    at setup (defineComponent.tsx:118:24)
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7236:25)
    at setupComponent (runtime-core.esm-bundler.js:7197:36)
    at mountComponent (runtime-core.esm-bundler.js:5599:7)
    at processComponent (runtime-core.esm-bundler.js:5565:9)
    at patch (runtime-core.esm-bundler.js:5040:11)
    at mountChildren (runtime-core.esm-bundler.js:5284:7)
    at mountElement (runtime-core.esm-bundler.js:5191:7)

我错过了什么？在运行时无法在动态组件中使用Vuetify吗？

我在这里创建了一个示例仓库。

Answer 1

Vuetify components must be wrapped within a VApp element. By default, the vue toastification container is attached to the HTML body (making it a sibling of the VApp container). To solve this problem, you can add the following code when installing the vue toastification plugin:

import Toast from "vue-toastification";
import type { PluginOptions } from "vue-toastification";

const ToastOptions: PluginOptions = {
  shareAppContext: true,
  container: () => document.getElementById("app")!,
};

app.use(Toast, ToastOptions);

Container is the element that toast should be mounted on: HTMLElement or a function that returns/parses to HTMLElement. The Vuetify App element should be a div

with the id #app

To access other global plugins that may be used in the component, such as $t in i18n, you may also want to access the application context. This can be achieved by adding the shareAppContext option. More information