Category: Top Vue Packages

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 a component to skip to an item with the keyboard, watching scrolling, and adding charts.

vue-skip-to

We can use the vue-skip-to package to skip to the element we want by pressing Tab.

To use it, we install it by running:

npm i vue-skip-to

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueSkipTo from "vue-skip-to";

Vue.use(VueSkipTo);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <vue-skip-to to="#num-100">skip</vue-skip-to>
    <div v-for="n in 100" :key="n" :id="`num-${n}`">{{n}}</div>
  </div>
</template>
<script>
export default {
  name: "app"
};
</script>

We use the vue-skip-to component which lets us move to a given element with the given selector.

We can jump to that element by pressing Tab.

vue-scrollactive

vue-scrollactive lets us detect which element is visible when we scroll.

To use it, we run:

npm i vue-scrollactive

to install it.

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueScrollactive from "vue-scrollactive";

Vue.use(VueScrollactive);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <scrollactive v-on:itemchanged="onItemChanged">
      <a href="#home" class="scrollactive-item">Home</a>
      <a href="#about-us" class="scrollactive-item">About Us</a>
    </scrollactive>
    <div
      id="home"
    >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus lacus vel scelerisque placerat. Donec elementum ligula in ipsum gravida aliquam. Aenean feugiat risus eu est maximus, eu molestie nibh aliquet. Aliquam ipsum purus, pellentesque a rhoncus et, mattis imperdiet dui. Nunc ante quam, pretium at convallis at, finibus efficitur sem. Etiam venenatis nunc lacus, ac congue lacus luctus a. Maecenas pretium vestibulum ex, tristique commodo orci porta vel. Fusce auctor est nec lorem dignissim viverra. Nunc volutpat interdum eros a mattis.</div>
    <div
      id="about-us"
    >Nunc ac bibendum turpis, vitae semper tortor. Nullam leo lorem, euismod sit amet vulputate non, ullamcorper at dolor. In hac habitasse platea dictumst. Nulla tincidunt non quam vel viverra. Suspendisse ut augue vitae elit semper volutpat. Ut non porttitor risus, in condimentum orci. Aliquam erat volutpat. Aenean accumsan, leo et pulvinar elementum, quam dui pharetra libero, a mattis diam nibh et velit. Fusce ultrices massa mi, ut lobortis mi condimentum nec. In eget lectus tincidunt, imperdiet ipsum quis, euismod velit. Curabitur sodales nibh et enim efficitur, quis rhoncus ante semper. Donec id blandit nisl, vitae pharetra ante.</div>
  </div>
</template>
<script>
export default {
  name: "app",
  methods: {
    onItemChanged(event, currentItem, lastActiveItem) {
      console.log(event, currentItem, lastActiveItem);
    }
  }
};
</script>

<style>
#home,
#about-us {
  height: 500px;
}
</style>

to use it.

We use the scrollactive component to watch for scrolling.

It’ll watch elements that are set with the ID in the href .

So when we scroll to the home and about-us divs, we’ll see the onItemChanged method run.

itemchanged event is emitted when we scroll.

Highcharts-Vue

highcharts-vue is a chart library for Vue apps.

To use it, we run:

npm i highcharts-vue highcharts

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import HighchartsVue from "highcharts-vue";

Vue.use(HighchartsVue);
Vue.config.productionTip = false;

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

App.vue

<template>
  <highcharts :options="chartOptions"></highcharts>
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {
        series: [
          {
            data: [1, 2, 3]
          }
        ]
      }
    };
  }
};
</script>

We use the highcharts component. Then we use the options prop with the data we want to display.

data is the values on the y-axis we want to display.

We can set the titles and axes labels by writing:

<template>
  <highcharts :options="chartOptions"></highcharts>
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {
        title: {
          text: "Fruit Consumption"
        },
        xAxis: {
          title: {
            text: "Fruit Number"
          },
          tickInterval: 1,
          categories: ["2020-01-01", "2020-01-02", "2020-01-03"]
        },
        yAxis: {
          title: {
            text: "Fruit eaten"
          },
          tickInterval: 1
        },
        series: [
          {
            name: "alex",
            data: [1, 0, 4]
          },
          {
            name: "james",
            data: [5, 7, 3]
          }
        ]
      }
    };
  }
};
</script>

title has the title text.

categories has the x-axis labels.

yAxis has the y-axis text including text withe the label.

series lets us plot one or more lines.

data are the y-axis values.

Conclusion

vue-skip-to lets users skip to an element with the keyboard.

vue-scrollactive lets us watch scrolling to some element.

Highcharts-Vue is a simple to use chart library for Vue

ue.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 a timer, context menu, signature and watermark input, and typing animation effect.

vue-timers

vue-timers is a useful package that we can use to add timers to our Vue app.

We can install it by running:

npm i vue-timers

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueTimers from "vue-timers";

Vue.use(VueTimers);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div></div>
</template>

<script>
export default {
  timers: {
    log: { time: 1000, autostart: true }
  },
  methods: {
    log() {
      console.log("Hello");
    }
  }
};
</script>

We registrar the plugin.

Then we add the timers as the value of timers to add the timers.

The property name in timers is the callback for the timer.

So log is called every 1 second.

time is the interval in milliseconds.

autostart is indicates that the method starts running when the component is mounted.

vue-context

vue-context lets us add a context menu to our Vue app.

To use it, we install it by running:

npm i vue-context

Then we can use it by writing:

<template>
  <div id="app">
    <div>
      <p @contextmenu.prevent="$refs.menu.open">Right click me</p>
    </div>

    <vue-context ref="menu">
      <li>Option 1</li>
      <li>Option 2</li>
    </vue-context>
  </div>
</template>

<script>
import { VueContext } from "vue-context";

export default {
  components: {
    VueContext
  }
};
</script>

We use the vue-context component.

And we listen to the contextmenu event to toggle on the menu when we right-click on the p element.

vue-deepset

vue-deepset lets us reference objects with dynamic paths in a Vue app.

To use it, we run:

npm i vue-deepset

to install it.

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import * as VueDeepSet from "vue-deepset";
Vue.use(VueDeepSet);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <input type="text" v-model="model['a.bar']">
    <p>{{model['a.bar']}}</p>
  </div>
</template>

<script>
export default {
  computed: {
    model() {
      return this.$deepModel(this.data);
    }
  },
  data() {
    return {
      data: {
        a: { bar: "baz" },
        foo: {
          bar: "qux"
        }
      }
    };
  }
};
</script>

We created a computed property with the this.$deepModel method that came with the vue-deepset.

And we pass in data in it so that the string paths are parsed and we can access the value by the path.

vue-signature

vue-signature is a component that lets us add a box to let users write their signature and add watermarks to an image.

To use it, we run:

npm i vue-signature

to install it.

Then we write:

<template>
  <div id="app">
    <vueSignature ref="signature" :sigOption="option" w="800px" h="400px" :defaultUrl="dataUrl"></vueSignature>
    <button @click="save">Save</button>
    <button @click="clear">Clear</button>
    <button @click="undo">Undo</button>
    <button @click="addWaterMark">addWaterMark</button>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      option: {
        penColor: "red",
        backgroundColor: "white"
      },
      disabled: false,
      dataUrl: "http://placekitten.com/200/200"
    };
  },
  methods: {
    save() {
      this.$refs.signature1.save("image/jpeg");
    },
    clear() {
      this.$refs.signature.clear();
    },
    undo() {
      this.$refs.signature.undo();
    },
    addWaterMark() {
      this.$refs.signature.addWaterMark({
        text: "mark ",
        font: "20px Arial",
        style: "all",
        fillStyle: "red",
        strokeStyle: "blue"
      });
    }
  }
};
</script>

to use it.

We use the vueSignature component.

We attach a ref to it so that we can use it by calling the methods that the component comes with.

We can draw on it. The signature can be cleared.

And we can add a watermark with the style of our choice.

vue-typer

If we want to display text with a typing animation effect, we can use vue-typer to do it in a Vue app.

To use it, we install it by running:

npm i vue-typer

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueTyperPlugin from "vue-typer";
Vue.use(VueTyperPlugin);

Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <vue-typer text="hello world"></vue-typer>
  </div>
</template>

<script>
export default {};
</script>

We use the vue-typer component to display the typing effect.

Whatever string is in the text prop is animated with that effect.

It emits events when the text is animated.

Conclusion

vue-timers lets us add a timer.

vue-context provides us with a way to add context menus.

vue-signature lets users add signatures and watermarks.

vue-typer lets us animate text with a typing effect.

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 displaying JSON, adding tooltips, adding sticky elements, and toggle switches.

vue-json-pretty

vue-json-pretty lets us render JSON in our Vue app.

To use it, first we install it by running:

npm i vue-json-pretty

Then we can use it by writing:

<template>
  <vue-json-pretty :path="'res'" :data="{ foo: 'bar' }" @click="handleClick"></vue-json-pretty>
</template>

<script>
import VueJsonPretty from "vue-json-pretty";

export default {
  components: {
    VueJsonPretty
  },
  methods: {
    handleClick(e) {
      console.log(e);
    }
  }
};
</script>

We use the vue-json-pretty component, which has the JSON we want to display on the screen in the data prop.

path is set to the root path.

handleClick is run with the click event is emitted.

It’s emitted whenever we clicked on the rendered JSON.

We’ll get the path that we clicked on.

There are many other options available like showing lines, the depth of the data to show, and much more.

vue-directive-tooltip

vue-directive-tooltip is a Vue directive for the tooltip.

To use it, we run:

npm i vue-directive-tooltip

to install it.

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import Tooltip from "vue-directive-tooltip";
import "vue-directive-tooltip/dist/vueDirectiveTooltip.css";

Vue.use(Tooltip);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <span v-tooltip="'tooltip text'">foo</span>
  </div>
</template>

<script>
export default {};
</script>

We register the plugin and then use the v-tooltip directive to display a tooltip when we hover over the span.

The value is the content.

We can change the content, positioning, delay, offset, and trigger it in different ways.

Also, we can apply custom styling to our tooltip.

vue-sticky

To create a sticky element, we can use the vue-sticky package.

To use it, we run:

npm i vue-sticky

to install it.

Then we can use it by writing:

<template>
  <div>
    <div v-sticky="{ zIndex: 1000, stickyTop: 0, disabled: false }">
      <p>lorem ipsum</p>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac urna tincidunt, bibendum ipsum et, auctor risus. Cras eget velit ut risus viverra sodales. Suspendisse bibendum sollicitudin quam, vel ullamcorper quam sagittis nec. Aenean egestas elit enim, vitae eleifend leo sagittis in. Sed eget dignissim elit, at scelerisque justo. Mauris rhoncus lectus in sagittis rhoncus. Curabitur viverra eleifend nulla. Aliquam sollicitudin nulla nibh, porttitor eleifend purus pharetra vitae. Donec urna libero, aliquam in consectetur in, fringilla ut sem. Sed placerat ex at orci bibendum blandit. Sed sit amet odio ac purus hendrerit tincidunt. Donec sed lacinia tellus. Fusce vitae nunc id tellus interdum semper. Mauris et cursus velit. Praesent finibus congue iaculis. Vivamus aliquet et magna sit amet commodo.</p>
  </div>
</template>

<script>
import VueSticky from "vue-sticky";

export default {
  directives: {
    sticky: VueSticky
  }
};
</script>

We use the v-sticky directive to make the div sticky.

stickyTop lets us specify where to put the sticky div relative to the top of the screen.

zIndex lets us set the z-index of the sticky element.

disabled indicates if we want to disable the sticky element or not.

vue-feather-icons

vue-gallery is a responsive video and image gallery.

To use it, we run:

npm i vue-feather-iconsto install it.

Then we use it by writing:

<template>
  <div>
    <activity-icon size="1.5x"></activity-icon>
  </div>
</template>

<script>
import { ActivityIcon } from "vue-feather-icons";

export default {
  components: {
    ActivityIcon
  }
};
</script>

We just import the icon and then use it.

Vue Switches

Vue Switches is a toggle switch component for our Vue app.

To use it, we run:

npm i vue-switches

to install it.

Then we can use it by writing:

<template>
  <div>
    <switches v-model="enabled"></switches>
  </div>
</template>

<script>
import Switches from "vue-switches";

export default {
  components: {
    Switches
  },

  data() {
    return {
      enabled: false
    };
  }
};
</script>

We just use the switches component to add the switch.

It binds to the enabled state with v-model .

It supports texts and color changes.

Conclusion

vue-json-pretty is a package to let us display JSON on the screen.

vue-directive-tooltip is a tooltip directive we can use in Vue apps.

vue-sticky lets us create a sticky element.

vue-feather-icons is a set of icon components we can use.

Vue Switches lets us add a toggle switch on our screen.

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 image croppers, creating printable elements, monthly pickers, and modals.

vue-html-to-paper

We can use vue-html-to-paper to make our Vue components printable on paper.

To use it, we run:

npm i vue-html-to-paper

to install it.

Then we write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueHtmlToPaper from "vue-html-to-paper";
Vue.use(VueHtmlToPaper);

Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <div id="printMe">
      <h1>Print me!</h1>
    </div>
    <button @click="print">print</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      output: null
    };
  },
  methods: {
    print() {
      this.$htmlToPaper("printMe");
    }
  }
};
</script>

to use it.

We register the plugin so that we can all $htmlToPaper with the ID of the element that we want to make printable.

Then when we click the print button, we’ll see a popup with the content and the print dialog box opening.

We can customize it with our own CSS:

import Vue from "vue";
import App from "./App.vue";
import VueHtmlToPaper from "vue-html-to-paper";
const options = {
  name: "_blank",
  specs: ["fullscreen=yes", "titlebar=yes", "scrollbars=yes"],
  styles: [
    "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  ]
};

Vue.use(VueHtmlToPaper, options);
Vue.config.productionTip = false;

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

We apply the styles from the Bootstrap 4 stylesheet and we set fullscreen to yes to enable full screen.

titlebar includes the title bar.

scrollbar includes the scroll bar.

$htmlToPaper also takes a callback that’s called after printing to run code then.

vue-monthly-picker

vue-monthly-picker is a month picker package for Vue apps.

To use it, we run:

npm i vue-monthly-picker moment

to install it.

Moment is a required dependency.

Then we use it by writing:

<template>
  <div>
    <vue-monthly-picker v-model="selectedMonth"></vue-monthly-picker>
    <p>{{selectedMonth}}</p>
  </div>
</template>

<script>
import VueMonthlyPicker from "vue-monthly-picker";

export default {
  components: {
    VueMonthlyPicker
  },
  data() {
    return {
      selectedMonth: undefined
    };
  }
};
</script>

We use the vue-monthly-picker to add a date picker.

v-model binds the selected month to the selectedMonth state.

Vodal

Vodal is a modal component that’s made for Vue apps.

To use it, we run:

npm i vodal

to install it.

Then we can use it by writing:

<template>
  <div>
    <vodal :show="show" animation="rotate" @hide="show = false">
      <div>vue modal.</div>
    </vodal>
  </div>
</template>

<script>
import Vodal from "vodal";
import "vodal/common.css";
import "vodal/rotate.css";

export default {
  components: {
    Vodal
  },
  data() {
    return {
      show: true
    };
  }
};
</script>

We use the vodal component and the CSS.

The modal content is between the vodal tags.

The show prop makes the modal show if it’s true .

The hide event is emitted when we click the close button.

animation is set to rotate to see a rotate animation when we open and close the modal.

We can customize the styles and the content as we wish.

Other animation types include zoom, fade, flip, slide up, slide down, and more.

Vue Advanced Cropper

Vue Advanced Cropper is a handy image cropper that’s easy for developers and users to use.

We can install it by running:

npm i vue-advanced-cropper

Then we can use it as follows:

<template>
  <div>
    <cropper
      class="cropper"
      :src="img"
      :stencilProps="{
      aspectRatio: 10/12
    }"
      @change="change"
    ></cropper>
  </div>
</template>

<script>
import { Cropper } from "vue-advanced-cropper";

export default {
  data() {
    return {
      img: "http://placekitten.com/200/200"
    };
  },
  methods: {
    change({ coordinates, canvas }) {
      console.log(coordinates, canvas);
    }
  },
  components: {
    Cropper
  }
};
</script>

Now we get an image cropped with the image we set for the img URL.

src is set to the image.

stencilProps sets various options like the aspect ratio.

Other things like minimum and maximum aspect ration, class name, lines, and more can be set in the stencilProps object.

Conclusion

vue-html-to-paper lets us make printable elements and display a print dialog box.

vue-monthly-picker is a month picker component.

Vodal is a simple modal component that’s customizable.

Vue Advanced Cropper is an image cropper component.

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 a JSON viewer, cropper, date picker, and notifications.

vue-json-tree-view

vue-json-tree-view is a nice JSON data viewer.

To use it, we run:

npm i vue-json-tree-view

to install it.

Then we can write:

<template>
  <div>
    <tree-view :data="jsonSource" :options="{ maxDepth: 3 }"></tree-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jsonSource: {
        foo: {
          bar: 1
        },
        baz: [1, 2, 3]
      }
    };
  }
};
</script>

to display the JSON on the screen.

We used the tree-view component to display the jsonSource object on the screen.

maxDepth is the maximum depth we display expanded.

The component emits a change-data emit which we can listen to.

Custom styles can also be applied.

VueCtkDateTimePicker

VueCtkDateTimePicker is an easy to use date and time picker for Vue apps.

To use it, we run:

npm i vue-ctk-date-time-picker

to install it.

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueCtkDateTimePicker from "vue-ctk-date-time-picker";
import "vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css";

Vue.component("VueCtkDateTimePicker", VueCtkDateTimePicker);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <VueCtkDateTimePicker v-model="value"/>
    <p>{{value}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: undefined
    };
  }
};
</script>

to use it.

We import the VueCtkDateTimePicker component and used it in our code.

Also, we imported the component’s CSS.

v-model binds the selected date and time to the value state.

It also has a dark mode.

The format of the picker can also change.

Other things can also be changed like the first day of the week, input size, shortcut keys, disabling dates and hours, and much more.

vue-croppa

vue-croppa lets us add an image cropper to our Vue app.

We can install it by running:

npm i vue-croppa

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import Croppa from "vue-croppa";
import "vue-croppa/dist/vue-croppa.css";

Vue.use(Croppa);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <croppa v-model="myCroppa"></croppa>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myCroppa: {}
    };
  }
};
</script>

We import the CSS and component so we can use it in our code.

Now we’ll get an image upload placeholder where we can choose the image to manipulate.

There are many other things we can do.

For instance, we can change zoom settings, placeholders, initial images, and more.

It also emits events when a file is chosen, or when there are issues with the file like the file size being too large.

The cropper can also be used programmatically.

vue-snotify

vue-snotify is a notification library for Vue apps.

To use it, we can run:

npm i vue-snotify

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import Snotify from "vue-snotify";
Vue.use(Snotify);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <vue-snotify></vue-snotify>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$snotify.success("success");
  }
};
</script>

We have the vue-snotify component to display the notification.

Then we display it with this.$nitify.success .

There are also options we can change.

For instance, we can change the timeout, show a progress bar, and more.

So we can write:

<template>
  <div>
    <vue-snotify></vue-snotify>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$snotify.success("success", {
      timeout: 2000,
      showProgressBar: false,
      closeOnClick: false,
      pauseOnHover: true
    });
  }
};
</script>

We can also write HTML:

<template>
  <div>
    <vue-snotify></vue-snotify>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$snotify.html(`<div><b>bold</b></div>`, {
      timeout: 5000,
      showProgressBar: true,
      closeOnClick: false,
      pauseOnHover: true
    });
  }
};
</script>

Conclusion

vue-json-tree-view is a useful JSON viewer for Vue apps.

VueCtkDateTimePicker lets us add a date time picker.

vue-croppa lets us add an image cropper.

vue-snotify lets us add notifications to our Vue app.