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 the best packages for adding calendars, smooth scrolling, query builder UI, and charts.

vue-smoothscroll

vue-smoothscroll lets us add a smooth scrolling effect to our Vue app.

To use it, we run:

npm i vue-smoothscroll

Then we write:

main.js

import Vue from "vue";
import App from "./App.vue";
const vueSmoothScroll = require("vue-smoothscroll");
Vue.use(vueSmoothScroll);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div class="root">
    <div v-smoothscroll="{ duration : 500, callback: callback, axis :'y' }">
      <div :ref="`num-${n}`" v-for="n in 100" :key="n">{{n}}</div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    callback() {
      console.log("scrolling");
    }
  }
};
</script>

to use it.

We use the v-smoothscroll directive to enable scrolling.

When we scroll, the callback will be run.

axis specifies the axis that we’re scrolling.

duration is the duration that we scroll.

Vue Query Builder

Vue Query Builder is a component that lets us add a query builder UI to our app.

To use it, we first install it by running:

npm install vue-query-builder

Then we use it by writing:

<template>
  <div class="root">
    <vue-query-builder v-model="query" :rules="rules"></vue-query-builder>
    <p>{{query}}</p>
  </div>
</template>

<script>
import VueQueryBuilder from "vue-query-builder";
export default {
  data() {
    return {
      rules: [
        {
          type: "text",
          id: "vegetable",
          label: "Vegetable"
        },
        {
          type: "radio",
          id: "fruit",
          label: "Fruit",
          choices: [
            { label: "apple", value: "apple" },
            { label: "orange", value: "orange" }
          ]
        }
      ],
      query: undefined
    };
  },
  components: { VueQueryBuilder }
};
</script>

We use the vue-query-builder component to add the query builder UI.

And we specify the rules so that the controls are displayed with those things on it.

choices show up as the choices. radio button shows up ad radio buttons.

type shows in the Match Type dropdown.

We can Add Rule and Add Group as we wish.

#web-development #software-development #javascript #programming #vue #vue.js