[Vuejs]-Vuetify can't load default inside Vue-Toastification

by

1👍

Vuetify components have to be wrapped inside the VApp element.
By default the vue toastification container is appended to the HTML body (making it a sibling of the VApp container).
To fix this issue 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 where the toast should be mounted: HTMLElement or function that returns/resolves into an HTMLElement.
The Vuetify App element should be a div with id #app

To get access to other global plugins which you might use in the component for example $t from i18n, you might also want to access the app context. This can be done by adding the shareAppContext option. more info

👤Alexander

Leave a comment