There are various ways of displaying alerts in the website. The basic way is simply using Bootstrap alert component. But in this post, I will be showing how we can use vue-toasted package to display alert with some movements as below in Vue JS. This example will be using together with Laravel.
Install vue-toasted package
npm install vue-toasted
To install the package in your project, run these command. The package details is available here in here. To learn more, visit the website.
Import package
In the main JS file (resources/js/app.js in Laravel project), you can import vue-toasted package installed from NPM as example above. The iconPack value can be changed to any value such as 'material' if you wanted to use material design icons (you have to import the material icons first). Once imported, you can simply use this method to trigger the alert.
this.$toasted.success("This is alert message");
Create Vue Component
I named the component as VueToastedAlertComponent (you can change this name as you wish) with file type .vue. If you noticed, there is no <template></template> defined in the component since it will only triggers the alert from vue-toasted package. So, there is no need to display any template.
Excluding the <template></template> in a component will cause an error. To fix this, I define render: function () { return; } which will return nothing. This is because, when we exclude the <template></template> Vue JS expects to render something but none is given. Thus, we have to manually define render method with empty value (simply return).
The props that the component will receive / need are alertMessage (the message we want to display in the alert) and alertType (success, error or others). With the created function defined, every time the component created, it will check the alertType and trigger the toasted function accordingly.
Register Component & Usage
Once the component has been registered, we are now ready to use the component. We need to feed the component with 2 props: alertMessage and alertType.
Remember, HTML is not case-sensitive, so to pass value to props with camel case (alertMessage), convert it to kebab case (alert-message). I place this code in the main view file, so even when the content of the view change, this alert will still available on every page.
I hope this sharing will give you some idea how to implement it. The best way to learn and understand how it works effectively is actually by doing it. Anyway, thanks for reading and if you have any questions or clarifications on anything, feel free to drop a comment.
Note: I have to admit that I’m not really good writing in English but I’m doing this to practice and enhance my writing over the time. So if you found anything sounds confusing, forgive me and let me know. 😀
