Requirements
vue version >=3.2.0
Installation
npm install vue-toastify-3
Guide
Step 1: Connection
First, you need to enable the plugin in the root of your project. When connecting, you can pass additional options such as delay, theme (day/night), position (top left, top center, top right, bottom right, bottom left), hover delay pause, close toast on click or click on the cross, offset, and your own toast cover saver.
First, we import the plugin
Then import the styles
Now connect the plugin and pass the parameters
To add your own cover, you need to import it first
And pass it as a parameter
You can change the cover of the three types of toast if needed, just import and pass them as parameters.
The project is written in TypeScript, so there will be hints for parameters
Step 2: Import the toastify component
Next, you need to add the toastify component, it does not need to be imported, it is registered globally
Step 3: Import hook
Importing the useToastify() hook
Step 3: Toastify
Next, we need to pass 2 parameters to toastify(), the first is the status, the second is the message.
You can use several toasts at the same time.
The toastify is ready to go!
With the "success" status, the "day" theme will look like this:
With the "warning" status:
With the "error" status:
With the "default" status:
With the "success" status, the "night" theme will look like this:
With the "warning" status:
With the "error" status:
