Create reusable alerts component using vue-toasted

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.

Example of displaying alerts (text pop-up in green) with vue-toasted.

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

Import vue-toasted package into main file

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

Filename: VueToastedAlertComponent.vue

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.

Error shown when template and render function not defined

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

Register the component to the main JS file (resources/js/app.js)

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.

Usage of the toasted-alert component in view file

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. 😀

Leave a Reply

Your email address will not be published. Required fields are marked *