Vuetify ne peut pas charger la valeur par défaut dans Vue-Toastification

Question

Ce que j'ai essayé, c'est vue-toastification en utilisant un composant personnalisé et certains composants Vuetify dans toast. J'ai créé le référentiel en utilisant npm create vuetify@latest et installé la bibliothèque npm i vue-toastification@latest. Ensuite, j'ai utilisé le plug-in :

<code>// main.ts

//Grillage
importer Toast, { POSITION } depuis "vue-toastification" ;
importer "vue-toastification/dist/index.css" ;

const app = createApp(App);

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

registrePlugins(application);

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

Ensuite, j'ai essayé d'appeler toast en utilisant le code suivant :

<code>// store/error.ts

importer { useToast } depuis "vue-toastification" ;
importer MyComponent depuis "@/components/MyComponent.vue" ;

const toast = useToast();

export const useErrorStore = definitionStore("erreur", () => {
  fonction locationErreur() {
    toast(MonComposant);
  }
});
</code>

Dans mon composant :

<code>// composants/MyComponent.vue

<modèle>
  <div class="conteneur">
    <v-conteneur>
      <v-rangée>
        <v-col> Exemple d'alerte </v-col>
        <v-col>
          <v-btn @click="recharger">Recharger</v-btn>
        </v-col>
      </v-rangée>
    </v-conteneur>
  </div>
</modèle>

<configuration du script lang="ts">
fonction recharger() {
  if (type de fenêtre !== "non défini") {
    window.location.reload();
  }
}
</script>
</code>

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

<code>// App.vue

<modèle>
  <v-app>
    <v-main>
      <v-btn @click="loc">Erreur de localisation</v-btn>
    </v-main>
  </v-app>
</modèle>

<configuration du script lang="ts">
importer { useErrorStore } depuis "./store/error";

const errorStore = useErrorStore();

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

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

[Vue warn] : erreur non gérée lors de l'exécution de la fonction de configuration 
  à <VContainer> 
  at <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > 
  à <VtToast key="_default00" position = "en bas au centre" draggable=true ... > 
  à <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move"  ...> 
  à <VtTransition transition="Vue-Toastification__bounce" class = "Vue-Toastification__container en bas au centre" > 
  at <VueToastification eventBus= EventBus {allHandlers : {…}} shareAppContext= {_uid : 0, _component : {…}, _props : null, _container : div#app, _context : {…}, …}position = "en bas au centre" >

[Vue warn] : erreur non gérée lors de l'exécution du vidage du planificateur. Il s'agit probablement d'un bug interne de Vue. Veuillez ouvrir un numéro sur https://new-issue.vuejs.org/?repo=vuejs/core 
  à <VContainer> 
  at <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > 
  à <VtToast key="_default00" position = "en bas au centre" draggable=true ... > 
  à <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move"  ...> 
  à <VtTransition transition="Vue-Toastification__bounce" class = "Vue-Toastification__container en bas au centre" > 
  at <VueToastification eventBus= EventBus {allHandlers : {…}} shareAppContext= {_uid : 0, _component : {…}, _props : null, _container : div#app, _context : {…}, …} position="bottom -centre" >

Erreur non interceptée (promise) : [Vuetify] Impossible de trouver l'instance par défaut
    à injectDefaults (defaults.ts:28:24)
    lors de l'installation (defineComponent.tsx:118:24)
    à callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    à setupStatefulComponent (runtime-core.esm-bundler.js:7236:25)
    à setupComponent (runtime-core.esm-bundler.js:7197:36)
    sur mountComponent (runtime-core.esm-bundler.js:5599:7)
    à processComponent (runtime-core.esm-bundler.js:5565:9)
    au patch (runtime-core.esm-bundler.js:5040:11)
    chez mountChildren (runtime-core.esm-bundler.js:5284:7)
    à mountElement (runtime-core.esm-bundler.js:5191:7)

Answer 1

Les composants Vuetify doivent être encapsulés dans un élément VApp. Par défaut, le conteneur vue toastification est attaché au corps HTML (ce qui en fait un frère du conteneur VApp). Pour résoudre ce problème, vous pouvez ajouter le code suivant lors de l'installation du plugin 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 est l'élément sur lequel toast doit être monté : HTMLElement ou une fonction qui renvoie/analyse HTMLElement. L'élément Vuetify App doit être un div avec l'identifiant #app

Pour accéder à d'autres plugins globaux pouvant être utilisés dans le composant, tels que $t dans i18n, vous souhaiterez peut-être également accéder au contexte de l'application. Ceci peut être réalisé en ajoutant l'option shareAppContext. Plus d'informations