Unable to set toast options in nuxt project

[bhaskar-nair2]

Versions

• 1.0

Describe the bug

When importing import { POSITION, TYPE } from 'vue-toastification' in the nuxt.config.js to setup options.position and type-based-settings, nuxt throws fatal error HTMLElement is not defined and the app is killed.

Expected behavior

Should be able to setup options in toast

Steps to reproduce

Reproduction demo.
Steps:

1. Install normally
2. Set up plugin
3. In your 'nuxt.config.js` file add

import { POSITION, TYPE } from 'vue-toastification'
and

toast:{
 position: POSITION.BOTTOM_RIGHT
}

4 Run npm run dev

Your Environment

• Device: PC
• OS: Ubuntu 20
• Browser: Chrome
• Version: 87

Additional context

[dwighson]

If youre using nuxt, you're supposed to import the plugin by creating a plugin file in your plugins folder and include it by importing it in your nuxt config

in /plugins/toast.js

import Vue from "vue";
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

Vue.use(Toast, {
  transition: "Vue-Toastification__bounce",
  maxToasts: 20,
  newestOnTop: true,
  position: "bottom-center",
  timeout: 5000,
  closeOnClick: true,
  pauseOnFocusLoss: true,
  pauseOnHover: true,
  draggable: true,
  draggablePercent: 0.6,
  showCloseButtonOnHover: false,
  hideProgressBar: false,
  closeButton: "button",
  icon: true,
  rtl: false
});

in your nuxt.config.js

plugins: [
  { src: '~/plugins/toast', ssr: false },
]

and if you want to call it from within vuex

$nuxt.$toast.error("this is your error toast!");

and last but not least, from within your template

mounted() {
  this.$toast.error("lolol");
}

as you can see, the options are initialized in the toast.js file

[Maronato]

Hello @bhaskar-nair2 ! Sorry about the delay, I totally forgot about resolving your issue :(
v1.7.10 has been released with the fix.

@dwighson You don't actually need to implement your own plugin. Vue-Toastification already comes with one. All you need to do is register the module "vue-toastification/nuxt" and it'll work.

[bhaskar-nair2]

@dwighson that's how I'm using it as of now. I was looking for a way to connect a configuration file after calling the plugin in the nuxt config. Similar to what we have in vuetify.
@Maronato That's alright. Thanks for the fix!