Although it may be a bit late, I recently discovered how to use toastify-js by installing it through npm in Laravel blade files. The first step is to compile a JavaScript file that includes importing Toastify.
To begin, install toastify-js:
npm install --save toastify-js
Next, import Toastify and its CSS in a JavaScript file. In my case, I used the default app.js file:
resources/js/app.js
import Toastify from 'toastify-js'
import "toastify-js/src/toastify.css"
window.Toastify = Toastify;
Afterwards, compile the "app.js" file in vite.config.js:
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js'
],
refresh: true,
}),
],
});
Once compiled, link the app.js file using the vite blade directive in your blade file. Place the directive before the closing body tag or anywhere else as needed:
@vite('resources/js/app.js')
You can now add the script to display the toast in any of your blade files:
<script type="module">
Toastify({
text: "Hello, I am toasted!!",
duration: 3000,
destination: "",
newWindow: true,
close: true,
gravity: "bottom", // `top` or `bottom`
position: "right", // `left`, `center` or `right`
stopOnFocus: true, // Prevents dismissing of toast on hover
style: {
background: "linear-gradient(to right, #00b09b, #96c93d)",
},
onClick: function() {} // Callback after click
}).showToast();
</script>
Ensure that the script tag has the type attribute set to "module" for the toast to work properly.
I hope these instructions help you implement toast notifications successfully. Feel free to reach out if you encounter any issues or have suggestions for improvement. For more customization options, refer to the toastify-js documentation:
https://github.com/apvarun/toastify-js/blob/master/README.md