Vuetify kann den Standardwert in Vue-Toastification nicht laden

Question

Was ich versucht habe, war die Vue-Toastifizierung mit einer benutzerdefinierten Komponente und einigen Vuetify-Komponenten in Toast. Ich habe das Repository mit npm create vuetify@latest erstellt und die Bibliothek npm i vue-toastification@latest installiert. Dann benutzte ich das Plug-in:

<code>// main.ts

//Toastifizierung
import Toast, { POSITION } aus „vue-toastification“;
import „vue-toastification/dist/index.css“;

const app = createApp(App);

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

registerPlugins(app);

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

Dann habe ich versucht, Toast mit dem folgenden Code aufzurufen:

<code>// store/error.ts

import { useToast } aus „vue-toastification“;
importiere MyComponent aus „@/components/MyComponent.vue“;

const toast = useToast();

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

In meiner Komponente:

<code>// Components/MyComponent.vue

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

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

我从App.vue文件中调用它:

<code>// App.vue

<Vorlage>
  <v-app>
    <v-main>
      <v-btn @click="loc">Standortfehler</v-btn>
    </v-main>
  </v-app>
</template>

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

const errorStore = useErrorStore();

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

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

[Vue-Warnung]: Unbehandelter Fehler während der Ausführung der Setup-Funktion 
  bei <VContainer> 
  at <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > 
  bei <VtToast key="_default00" position="unten-mitte" draggable=true ... > 
  bei <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move"  ... > 
  bei <VtTransition transit="Vue-Toastification__bounce" class="Vue-Toastification__container unten-mitte" > 
  at <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …}position="unten-mitte" >

[Vue-Warnung]: Unbehandelter Fehler während der Ausführung des Scheduler-Flushes. Dies ist wahrscheinlich ein interner Fehler von Vue. Bitte öffnen Sie ein Problem unter https://new-issue.vuejs.org/?repo=vuejs/core 
  bei <VContainer> 
  at <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > 
  bei <VtToast key="_default00" position="unten-mitte" draggable=true ... > 
  bei <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move"  ... > 
  bei <VtTransition transit="Vue-Toastification__bounce" class="Vue-Toastification__container unten-mitte" > 
  at <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …} position="bottom -Mitte" >

Nicht abgefangener (versprochener) Fehler: [Vuetify] Standardinstanz konnte nicht gefunden werden
    bei injectDefaults (defaults.ts:28:24)
    beim Setup (defineComponent.tsx:118:24)
    bei callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    bei setupStatefulComponent (runtime-core.esm-bundler.js:7236:25)
    bei setupComponent (runtime-core.esm-bundler.js:7197:36)
    bei mountComponent (runtime-core.esm-bundler.js:5599:7)
    bei ProcessComponent (runtime-core.esm-bundler.js:5565:9)
    beim Patch (runtime-core.esm-bundler.js:5040:11)
    bei mountChildren (runtime-core.esm-bundler.js:5284:7)
    bei mountElement (runtime-core.esm-bundler.js:5191:7)

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

Answer 1

Vuetify组件必须包裹在VApp元素内。 默认情况下，vue toastification容器附加到HTML body上（使其成为VApp容器的兄弟）。 要解决此问题，您可以在安装vue toastification插件时添加以下代码：

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是toast应该挂载的元素：HTMLElement或返回/解析为HTMLElement的函数。 Vuetify App元素应该是一个id为#app的div

要访问组件中可能使用的其他全局插件，例如i18n中的$t，您可能还希望访问应用程序上下文。可以通过添加shareAppContext选项来实现。 更多信息