Top Vue Packages for Adding Walkthroughs, Making HTTP Requests, and Validating Forms

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at how the best packages for adding walkthroughs, making HTTP requests, and validating forms.

vue-tour

We can use vue-tour to create walkthroughs for our app.

To use it, we write:

npm i vue-tour

Then we can register the components by writing:

import Vue from "vue";
import App from "./App.vue";
import VueTour from "vue-tour";

require("vue-tour/dist/vue-tour.css");
Vue.use(VueTour);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

We also imported the styles.

Then we can use it by writing:

<template>
  <div>
    <div id="v-step-0">step 0.</div>
    <div class="v-step-1">step 1</div>
    <div data-v-step="2">step 2</div>
    <v-tour name="myTour" :steps="steps"></v-tour>
  </div>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        {
          target: "#v-step-0",
          header: {
            title: "get started"
          },
          content: `hello <strong>world</strong>!`
        },
        {
          target: ".v-step-1",
          content: "step 1"
        },
        {
          target: '[data-v-step="2"]',
          content: "Step 2",
          params: {
            placement: "top"
          }
        }
      ]
    };
  },
  mounted() {
    this.$tours["myTour"].start();
  }
};
</script>

We have the list of steps in the template.

Then we have the steps array with the steps that target the elements that are on the page.

This way, the steps are displayed near the target element.

In each step, we can set the header, content, and placement of the steps.

Then to start the tour, we use the start method at the bottom of the page as we did.

vue-resource

vue-resource is an HTTP client that’s made as a Vue plugin.

To install it, we run:

npm i vue-resource

Then we can use it by writing:

import Vue from "vue";
import App from "./App.vue";
const VueResource = require("vue-resource");

Vue.use(VueResource);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

to register the plugin.

Now we have access to the $http property in our component:

<template>
  <div>{{data.name}}</div>
</template>

<script>
export default {
  data() {
    return {
      data: {}
    };
  },
  async mounted() {
    const { body } = await this.$http.get("https://api.agify.io/?name=michael");
    this.data = body;
  }
};
</script>

It’s promised based so we can use async and await.

We can set common options that are used throughout the app by writing:

Vue.http.options.root = '/root';
Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';

We set the root URL for all requests and the Authorization header that’s used everywhere.

vue-form

vue-form is a form validation library for Vue apps.

We can use it by installing the package:

npm i vue-form

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueForm from "vue-form";

Vue.use(VueForm);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <vue-form :state="formState" [@submit](http://twitter.com/submit "Twitter profile for @submit").prevent="onSubmit">
      <validate tag="label">
        <span>Name *</span>
        <input v-model="model.name" required name="name">

<field-messages name="name">
          <div>Success!</div>
          <div slot="required">name is required</div>
        </field-messages>
      </validate>
    </vue-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {
        name: ""
      },
      formState: {}
    };
  },
  methods: {
    onSubmit() {
      if (this.formState.$invalid) {
        return;
      }
    }
  }
};
</script>

We registered the component in main.js .

Then in the component, we used the vue-form component.

The state prop is set to the formState object, which will be updated when the form state change.

submit.prevent has the submit handler with e.preventDefault called on it.

v-model binds to the model.

The field-messages component displays the form validation messages.

required indicates that it’s required.

In the onSubmit method, we check the formState.$invalid to check whether the form is invalid.

If it’s invalid, we don’t proceed with submission.

Other form state properties include $name with the name attribute value of the field.

$valid to see if the form or field is valid.

$focused to check that the form or field is focused.

$dirty to see if the form or field has been manipulated.

It also comes with other validators like email, URL, number, min and max length, and more.

Conclusion

We can add a walkthrough tour to our Vue app with the vue-tour package.

vue-resource is a promise-based HTTP client that’s made for Vue apps.

vue-form is a useful form validation plugin for Vue apps.