There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier. In this article, we’re going to look at a few of these libraries, what they do, and how to use them during development.

When working on a new project, there are certain features that are necessary depending on how the application is supposed to be used. For example, if you’ll be storing user-specific data, you’ll need to handle authentications, this will require the setting up of a form that needs to be validated. Things such as authentication and form validations are common; there are solutions that possibly fit your use case.

To properly utilize your development time, it is better you use what is available, instead of inventing yours.

As a new developer, there’s the possibility that you won’t be aware of all that the Vue ecosystem provides you. This article will help with that; it will cover certain useful tools that will aid you in building better Vue applications.

Note: There are alternatives to these libraries and this article is in no way placing these few over the others. They are just the ones I’ve worked with.

This tutorial is aimed at beginners that either just started learning about Vue or already have basic knowledge of Vue. All code snippets used in this tutorial can be found on my GitHub.

Vue-notification

During user interaction, there is often a need to display a success message, error message, or random info to the user. In this section, we’re going to look at how to display messages and warnings to your user using vue-notification. This package provides an interface with a nice animation/transition for displaying errors, general information, and success messages to your user across your application and it does not require a lot of configuration to get up and running.

Installation

You can install vue-notification in your project using either Yarn or NPM depending on the package manager for your project

Yarn

yarn add vue-notification

npm

npm install --save vue-notification

After the installation is complete, the next thing would be to add it to the entry point in your app, the main.js file.

main.js

//several lines of existing code in the file
    import Notifications from 'vue-notification'
    Vue.use(Notifications)

At this point, we only need to add the notifications component in the App.vue file before we can display notifications in our app. The reason why we’re adding this component to the App.vue file is to avoid repetition in our application because no matter the page the user is on in our app, components in App.vue (e.g the header & footer components) would always be available. This takes the pain of having to register the notification component in every file that we need to display a notification to the user.

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">Notifications</router-link>
    </div>
    <notifications group="demo"/>
    <router-view />
  </div>
</template>

Here, we add one instance of this component which accepts a group prop which would be used in grouping the different types of notifications we have. This is because the notifications component accepts a number of props that dictate how the component behaves and we’re going to look at a few of these.

1. group
2. This prop is used to specify the different types of notifications you might have in your app. For instance, you might decide to use different styles and behavior depending on what purpose the notification is supposed to serve, form validation, API response, etc.
3. type
4. This prop accepts a value that serves as a ‘class name’ for each notification type we have in our application and examples can include success, error, and warn. If we use any one of these as a notification type, we can easily style the component by using this class format vue-notification + '.' + type, i.e .vue-notification.warn for warn, and so on.
5. duration
6. This prop specifies how long the notification component should appear before disappearing. It accepts a number as a value in ms and also accepts a negative number (-1) if you want it to remain on your user’s screen till they click on it.
7. position
8. This prop is used in setting the position you want notifications to appear from in your app. Some of the available options are top left, top right, top center, bottom right, bottom left, and bottom center.

We can add these props to our component in App.vue so it now looks like this;

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">Notifications</router-link>
    </div>
    <notifications
      :group="group"
      :type="type"
      :duration="duration"
      :position="position"
    />
    <router-view />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        duration: -1,
        group: "demo",
        position: "top center",
        type: "info",
      };
    },
  };
</script>
<style>
  .vue-notification.info {
    border-left: 0;
    background-color: orange;
  }
  .vue-notification.success {
    border-left: 0;
    background-color: limegreen;
  }
  .vue-notification.error {
    border-left: 0;
    background-color: red;
  }
</style>

We also add styling for the different notification types that we would be using in our application. Note that other than group, we can pass each of the remaining props on the fly whenever we want to display a notification and it would still work accordingly. To display a notification in any of your Vue files, you can do the following.

this.$notify({
  group: "demo",
  type: "error",
  text: "This is an error notification",
});

Here, we create a notification of type error under the group notification of demo. The property text accepts the message you want the notification to contain and in this case, the message is ‘This is an error notification’. This is what the notification would look like in your app.

vue-notification in action: error notification displaying in the browser. (Large preview)

You can find out the other available props and other ways to configure the notification on the official docs page.

#vue #javascript #web-development #programming #developer