Vue Components FTW - Toasted

Before I begin this post, a quick bit of context. A few days ago I was reading an excellent post on Vue and Internationalization (How to add Internationalization to a Vue Application), and while it is a great article in itself, towards the end the author mentions a small, random little component to make it easy to display country flags (vue-flag-icon). I was really intrigued by this and thought it would be interesting to start looking into the options available to us as Vue developers.

With that in mind, I hopped on Twitter and asked what folks would think about a regular series where I talk about components. The idea is to focus on small, easy to use components that integrate well into existing projects. "Small" is relative of course, but in my mind, things like Vuetify) would not apply. (And to be clear, Vuetify is pretty awesome!)

I also had one more "rule" that I reserve the right to ignore later. I wanted to focus on components that supported both npm installs as well as script tag use (i.e., add this script tag to your HTML) file. I think folks may disagree with me but I really think it's important for a Vue component to support both "build process" Vue apps (not a great phrase, sorry) as well as simple "I'm dropping Vue into a regular HTML page" use cases.

For now I'm going to try to make this a weekly series, but honestly I think it will be more like twice a month. And I'm going with Vue Components FTW as the tagline because this is my blog and I get to be as silly as I'd like!

Ok, sorry for the long preamble! For my first Vue component I’m reviewing vue-toasted which is a simple “Toast” library. Don’t know what a “toast” is? Don’t feel bad. In this content (the web, and not your kitchen), toast is simply a notification that appears and (typically) disappears automatically. Something like, “You’ve got new mail!”. Remember when getting email was cool?

You can see an example of this below - just click the cat.

The component has an easy API but also supports quite a few options out of the box:

• The ability to automatically dismiss.
• The ability to theme the toast.
• The ability to add buttons with different actions to the toast.
• The ability to define ‘global’ toasts for easy reuse across an application. (And these even support dynamic options so you can create a global error handler, for example, but allow for specific error messages.)
• Integration with popular icon fonts.

Installation is either via npm or by adding a script tag:

<script src="https://unpkg.com/vue-toasted"></script>

Once added, you then tell Vue about it:

Vue.use(Toasted)

So how easy is it to use? An eternal, never-ending immortal Vampire toast can be created like so:

Vue.toasted.show('meow!');

Note that the result of this call is a toast object which you could use to destroy it later. I’d call it woodenStake but that’s me.

Adding duration is as simple as passing an object with options:

Vue.toasted.show('life is short...', {
    duration: 2000
});

And yeah, there’s many different options. Here’s an example of adding an action button to the toast:

Vue.toasted.show('Just Do It', {
    action: {
        text:'Done',
        onClick:(e, toast) => {
            toast.goAway(0);
        }
    }
});

Defining global toasts is also pretty easy - and remember you can define these to take arguments for on the fly customization as well. (This example is taken pretty much as is from the docs.)

Vue.toasted.register('my_app_error', 'Oops.. Something Went Wrong..', {
    type : 'error'
});
// later in your code...
this.$toasted.global.my_app_error();

And then finally, an example of using an icon pack. Note that you must include the icon pack before you do this. For my CodePen demo (you’ll see it in a bit) I simply added the URL in the CSS panel.

Vue.toasted.show('I forgot to DVR "Arrow"!', {
    duration:2000,
    icon:'dvr',
    type:'error'
});

Here’s a CodePen demonstrating everything above. It also demonstrates an interesting issue with the component. If you do a toast for “Foo”, the component will nicely size it to fit the content. If that toast is still visible and you then toast “My Kingdom for a Beer”, you’ll notice the earlier toast resizes to match the same size as the new one. I guess that’s not a bug but it surprised me a bit.

Pretty simple, pretty useful, and should be easy to drop into your next Vue project. If you’ve used vue-toasted before, let me know in a comment below. And if you like this series (so far anyway) give me a comment as well!