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 waterfall grid, adding WYSIWYG editors, charts, and embedding YouTube videos.

vue-waterfall

vue-waterfall lets us add a waterfall component to our Vue app.

To use it, we run:

npm i vue-waterfall

Then we can use it by writing:

<template>
  <div id="app">
    <waterfall :line-gap="200" :watch="items">
      <waterfall-slot v-for="n in 100" :width="50" :height="200" :key="n">{{n}}</waterfall-slot>
    </waterfall>
  </div>
</template>

<script>
import Waterfall from "vue-waterfall/lib/waterfall";
import WaterfallSlot from "vue-waterfall/lib/waterfall-slot";
export default {
  components: {
    Waterfall,
    WaterfallSlot
  }
};
</script>

We use the waterfall component to add the component.

The items are populated with the waterfall-slot component.

The items’ width and height are set.

Vue JS Froala WYSIWYG Editor

Vue JS Froala WYSIWYG Editor is a rich text editor that’s made for Vue apps.

To use it, we run:

npm i vue-froala-wysiwyg

to install it.

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import "froala-editor/js/plugins.pkgd.min.js";
import "froala-editor/js/third_party/embedly.min";
import "froala-editor/js/third_party/font_awesome.min";
import "froala-editor/js/third_party/spell_checker.min";
import "froala-editor/js/third_party/image_tui.min";
import "froala-editor/css/froala_editor.pkgd.min.css";

import VueFroala from "vue-froala-wysiwyg";
Vue.use(VueFroala);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <froala :tag="'textarea'" :config="config" v-model="model"></froala>
  </div>
</template>

<script>
import VueFroala from "vue-froala-wysiwyg";

export default {
  name: "app",
  data() {
    return {
      config: {
        events: {
          initialized() {
            console.log("initialized");
          }
        }
      },
      model: "hello!"
    };
  }
};
</script>

We use the froala component to render the text area.

The tag is set as 'textarea' to render it as such.

Then we should see a text editor with some basic functionality like bold, italics, and underline with the text editor.

Vue YouTube Embed

Vue YouTube Embed lets us embed YouTube videos in our app.

To use it, we run:

npm i vue-youtube-embed

to install it.

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueYouTubeEmbed from "vue-youtube-embed";
Vue.use(VueYouTubeEmbed);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <youtube video-id="NNfGvwqfrBY"></youtube>
  </div>
</template>

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

We use the youtube component and set the video-id prop to embed the video.

We can also get the video ID from the full URL with the start time.

It emits various events that we can listen to.

Vue Chartkick

Vue Chartkick is a chart library that’s based on chart.js

We install it by running:

npm i vue-chartkick chart.js

to use it.

Chart.js is a required dependency.

Then we write:

main.js

import Vue from "vue";
import App from "./App.vue";
import Chartkick from "vue-chartkick";
import Chart from "chart.js";

Vue.use(Chartkick.use(Chart));
Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <line-chart :data="{'2020-01-01': 11, '2020-01-02': 6}"></line-chart>
  </div>
</template>

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

We just register the plugin and use the line-chart component.

To populate the data, we pass in an object to the data prop with the chart data.

The key is the x-axis values, and the values are the y-axis values.

It also supports other charts.

We can add a pie chart with the pie-chart component:

<template>
  <div id="app">
    <pie-chart :data="[['apple', 43], ['orange', 23]]"></pie-chart>
  </div>
</template>

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

It supports many other charts.

vue-wysiwyg

vue-wysiwyg is an easy to use rich text editor for Vue apps.

To install it, we run:

npm i vue-wysiwyg

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import wysiwyg from "vue-wysiwyg";
Vue.use(wysiwyg, {});
Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <wysiwyg v-model="content"/>
    <p>{{content}}</p>
  </div>
</template>

<script>
import "vue-wysiwyg/dist/vueWysiwyg.css";

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

We use the wysiwyg component to add the rich text editor.

v-model binds the inputted value to the content prop.

We also have to remember to import the CSS to make it look properly.

Conclusion

vue-waterfall lets us add a waterfall grid to our Vue app.

Vue JS Froala WYSIWYG Editor and vue-wysiwyg are 2 easy to use rich text editors that we can use in our Vue app.

Vue YouTube Embed lets us embed YouTube videos easily.

Vue Chartkick is an easy to use chart library.

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 text editors, formatting dates, calendars, and more.

vue-cal

vue-cal is an easy to use calendar component for Vue apps.

To use it, we install it by running:

npm i vue-cal

Then we can use it by writing:

<template>
  <div>
    <vue-cal hide-view-selector :time="false" active-view="month" xsmall></vue-cal>
  </div>
</template>

<script>
import VueCal from "vue-cal";
import "vue-cal/dist/vuecal.css";

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

We imported the CSS and registered the component.

Now we get a calendar displayed thanks to the vue-cal component.

x-small makes the calendar table small.

time indicates whether we display the time.

active-view sets the active view. month means we display the monthly calendar.

We can set the min and max dates.

The date range can be set:

<template>
  <div>
    <vue-cal
      :min-date="minDate"
      :max-date="maxDate"
      hide-view-selector
      :time="false"
      active-view="month"
      xsmall
    ></vue-cal>
  </div>
</template>

<script>
import VueCal from "vue-cal";
import "vue-cal/dist/vuecal.css";

export default {
  computed: {
    minDate() {
      return new Date().subtractDays(50);
    },
    maxDate() {
      return new Date().addDays(50);
    }
  },
  components: { VueCal }
};
</script>

It also supports localization.

vue-uid

vue-uid is a package that generates a unique ID in a Vue component

To install it, we run:

npm i vue-uid

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueUid from "vue-uid";

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

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

App.vue

<template>
  <div>{{$_uid}}</div>
</template>

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

We just use the $_uid variable that’s available after registering the component to use it.

It can also be registered as a mixin within the component.

Vue2Editor

Vue2Editor is a rich text editor for Vue apps.

To use it, we can install it by running:

npm i vue2-editor

Then we can use it by writing:

<template>
  <div id="app">
    <vue-editor v-model="content"></vue-editor>
    <div v-html="content"></div>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    VueEditor
  },

  data() {
    return {
      content: "<h1>hello</h1>"
    };
  }
};
</script>

All we have to do is to use the vue-editor component.

It comes with common features like bold, italics, lists, underline, images, video inserting, adding links, etc.

v-model binds the HTML content that’s typed into the editor with content .

It emits various events that we can listen to.

Also, it supports many kinds of customizations.

@handsontable/vue

@handsontable/vue provides us basic spreadsheet features in our Vue app.

To use it, we write:

npm i @handsontable/vue `handsontable`

It’s a Vue version of handsontable , so it’s a required dependency.

Then we can use it by writing:

<template>
  <hot-table :data="data" colHeaders="year" rowHeaders="fruit" width="600" height="300"></hot-table>
</template>

<script>
import { HotTable } from "@handsontable/vue";

export default {
  data: function() {
    return {
      data: [
        ["", "apple", "orange", "grape", "banana"],
        ["2019", 10, 11, 12, 13],
        ["2020", 20, 11, 14, 13],
        ["2021", 30, 15, 12, 13]
      ]
    };
  },
  components: {
    HotTable
  }
};
</script>

<style lang='scss'>
@import "~handsontable/dist/handsontable.full.css";
</style>

We have the data array to store the data.

hot-table is the component we use to display the data grid.

colHeaders have the column headers.

rowHeaders have the row headers.

We can also set the width and height.

Also, we imported the styles.

Now we have a grid that we can navigate like a spreadsheet.

A license key is required to use this package if we don’t want the license key missing message to show.

It’s free for non-commercial use.

It has many other spreadsheet features like filtering data, merging cells, autofill, and more.

vue-date-fns

vue-date-fns provide us with many filters for formatting dates.

To use it, we run:

npm i vue-date-fns

to install it.

Then we can use it bu writing:

<template>
  <div>{{ new Date() | date }}</div>
</template>

<script>
import { dateFilter } from "vue-date-fns";

export default {
  filters: {
    date: dateFilter
  }
};
</script>

We display the date with the date filter.

We can use the filters with this.$date in our components.

The locale can also be customized.

Conclusion

vue-date-fns provides us with Vue filters to format dates.

@handsontable/vue lets us add a spreadsheet to our Vue app.

vue-cal is a calendar component for Vue.

vue-uid lets us create unique IDs in our Vue components

Vue2Editor is a rich text editor with lots of features.

SimplebarVue

SimplebarVue lets us add a toolbar to a Vue app.

To install it, we run:

npm i simplebar-vue

Then we can use it by writing:

main.js

<template>
  <simplebar data-simplebar-auto-hide="false">toolbar</simplebar>
</template>

<script>
import simplebar from "simplebar-vue";
import "simplebar/dist/simplebar.min.css";

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

We just import the simplebar component and use it.

vue-konva

vue-konva is a library that makes working with the HTML canvas much easier than with the built-in library.

To use it, we first install it by running:

npm i vue-konva konva

Konva is a required dependency of vue-konva.

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueKonva from "vue-konva";

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

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

We registered the VueKonva plugin.

Then we can use the built-in components buy writing:

<template>
  <div>
    <v-stage :config="configKonva">
      <v-layer>
        <v-circle :config="configCircle"></v-circle>
      </v-layer>
    </v-stage>
  </div>
</template>

<script>
export default {
  data() {
    return {
      configKonva: {
        width: 500,
        height: 500
      },
      configCircle: {
        x: 150,
        y: 150,
        radius: 70,
        fill: "red",
        stroke: "green",
        strokeWidth: 2
      }
    };
  }
};
</script>

We set up the canvas by using the v-stage and v-layer components.

Inside it, we have the v-circle component to create a circle.

configKonva sets the size of the canvas.

configCircle sets the options for the circle.

We made the circle fill red and the border green.

x is the x-coordinate of the center.

y is the y-coordinate of the center.

vue-table-component

vue-table-component is a table component that has sorting and filter capabilities.

To install it, we run:

npm i vue-table-component moment

Moment is a required dependency of vue-table-component.

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import TableComponent from "vue-table-component";

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

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

App.vue

<template>
  <div>
    <table-component :data="data" sort-by="firstName" sort-order="asc">
      <table-column show="firstName" label="First name"></table-column>
      <table-column show="lastName" label="Last name"></table-column>
      <table-column label :sortable="false" :filterable="false">
        <template slot-scope="row">
          <a :href="`#${row.firstName}`">Edit</a>
        </template>
      </table-column>
    </table-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          firstName: "john",
          lastName: "smith"
        },
        {
          firstName: "mary",
          lastName: "green"
        },
        {
          firstName: "alex",
          lastName: "wong"
        },
        {
          firstName: "jane",
          lastName: "doe"
        }
      ]
    };
  }
};
</script>

Now we have a table with sorting and filtering capabilities built-in.

sort-by lets us set the field to sort by.

sort-order is the sort order.

table-column set the table columns.

show has the property of the entry we want to display.

sortable lets us set whether a column is sortable.

filterable lets us set whether a column is filterable.

There are many other options.

vue-tags-input

vue-tags-input lets us add a tag input to our Vue app.

To install it, we run:

npm i @vojtechlanka/vue-tags-input

Then to use it, we write:

main.js

<template>
  <div>
    <vue-tags-input
      v-model="tag"
      :tags="tags"
      :is-draggable="true"
      @tags-changed="newTags => tags = newTags"
      @tag-order-changed="newTags => tags = newTags"
    />
    <p>{{tags}}</p>
  </div>
</template>
<script>
import VueTagsInput from "@vojtechlanka/vue-tags-input";

export default {
  components: {
    VueTagsInput
  },
  data() {
    return {
      tag: "",
      tags: []
    };
  }
};
</script>

tags-changed is emitted when tags are changed by adding or otherwise.

tag-order-changed is emitted when their order changed by dragging.

v-model binds the input value of the tag is entered.

is-draggable set to true makes the tags draggable.

Conclusion

SimplebarVue is a Vue component for adding toolbars.

vue-konva is a package for letting us work with the canvas in Vue apps.

vue-table-component lets us add tables with sorting and filtering with ease.

vue-tags-input lets us add inputs to our app.

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 carousels, alerts, drag, and drop, and a video player.

Slick for Vue.js

Slick for Vue.js lets us add a carousel to our Vue app.

To use it, we run:

npm i vue-slick

Then we can use it by writing:

<template>
  <div>
    <slick ref="slick" :options="slickOptions">
      <a href="http://placekitten.com/200/200">
        <img src="http://placekitten.com/200/200" alt>
      </a>
      <a href="http://placekitten.com/200/200">
        <img src="http://placekitten.com/200/200" alt>
      </a>
    </slick>
  </div>
</template>

<script>
import Slick from "vue-slick";
import "../../../node_modules/slick-carousel/slick/slick.css";

export default {
  components: { Slick },

  data() {
    return {
      slickOptions: {
        slidesToShow: 1
      }
    };
  },

  methods: {
    next() {
      this.$refs.slick.next();
    },

    prev() {
      this.$refs.slick.prev();
    },

    reInit() {
      this.$nextTick(() => {
        this.$refs.slick.reSlick();
      });
    }
  }
};
</script>

We use the slick component to add the carousel. It comes with the buttons. We set it to show one slide per page with the slidesToShow option. Also, we import the styles to make it display properly.

vue-sweetalert2

vue-sweetalert2 lets us add an alert display in our app.

To install it, we run:

npm i vue-sweetalert2

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueSweetalert2 from "vue-sweetalert2";
import "sweetalert2/dist/sweetalert2.min.css";

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

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

App.vue

<template>
  <button @click="showAlert">click me</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal("Hello!");
    }
  }
};
</script>

We use the $swal method that comes with the plugin to create our own alert. We can change the color of the buttons and we can also add custom styling.

To do that, we write:

import Vue from "vue";
import App from "./App.vue";
import VueSweetalert2 from "vue-sweetalert2";
import "sweetalert2/dist/sweetalert2.min.css";

const options = {
  confirmButtonColor: "green",
  cancelButtonColor: "blue"
};

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

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

We set the color of the confirm and cancel buttons with the object.

vue-video-player

vue-video-player is a video player component that we can add to a Vue app.

To install it, we run:

npm i vue-video-player

Then we can use it by writing:

<template>
  <video-player
    class="video-player-box"
    ref="videoPlayer"
    :options="playerOptions"
    :playsinline="true"
  ></video-player>
</template>

<script>
export default {
  data() {
    return {
      playerOptions: {
        muted: true,
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            src:
              "https://mirrors.standaloneinstaller.com/video-sample/P6090053.mp4"
          }
        ],
        poster: "https://placekitten.com/200/200"
      }
    };
  },

  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    }
  },
  methods: {}
};
</script>

We added the video-player component. We just set src of the video with the location.

poster is the picture we see before we play the video.

video-player also emits all the video element events like play , pause , canplay and much more.

vue-drag-drop

vue-drag-drop provides us with components to let us add drag and drop features in our Vue app.

To install it, we run:

npm i vue-drag-drop

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import { Drag, Drop } from "vue-drag-drop";

Vue.component("drag", Drag);
Vue.component("drop", Drop);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <drag class="drag" :transfer-data="{ draggable }">{{ draggable }}</drag>
    <drop class="drop" @drop="handleDrop">Dropzone</drop>
  </div>
</template>

<script>
export default {
  data() {
    return { draggable: "Drag Me" };
  },
  methods: {
    handleDrop() {
      alert("dropped");
    }
  }
};
</script>

<style>
.drag,
.drop {
  display: inline-block;
  position: relative;
  padding: 30px;
  text-align: center;
  vertical-align: top;
}
</style>

We have the drag and drop component from the library. We can drag the drag component to the drop component. Then the drop event is emitted and the handleDrop method is run.

Conclusion

Slick for Vue.js is a carousel we can use to add carousels to our app. vue-sweetalert2 is an alert we can use in our app. vue-video-player is a video player we can write. vue-drag-drop is a set of components for adding drag and drop capabilities. Thanks for reading my article, I hope you found it helpful!

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 to add a date and time picker, and a virtual scroll list.

Vue Datetime Picker

Vue Datetime Picker lets us add a date and time picker to our Vue app.

To install it, we run:

npm i vue-vanilla-datetime-picker

Now we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import DateTimePicker from "vue-vanilla-datetime-picker";

Vue.component("date-time-picker", DateTimePicker);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <date-time-picker v-model="datetime"></date-time-picker>
  </div>
</template>

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

<style lang='scss'>
@import "../../../node_modules/vue-vanilla-datetime-picker/dist/DateTimePicker";
</style>

We register the component in main.js .

Then we import the styles from the package in the component.

Also, we use the date-time-picker to let users pick the date.

v-model lets us save the selection to the datetime state.

It has many slots to let us customize any section of the date-time picker.

vue2-datepicker

vue2-datepicker is another date picker package that we can use to add one.

To use it, first we install it by running:

npm i vue2-datepicker

Then we use it by writing:

<template>
  <div>
    <date-picker v-model="time" valuetype="format"></date-picker>
  </div>
</template>

<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";

export default {
  components: { DatePicker },
  data() {
    return {
      time: null
    };
  }
};
</script>

We add the date-picker to bind it to v-model to use it.

It can also let us select the time with the date.

We can write:

<template>
  <div>
    <date-picker v-model="time" type="datetime"></date-picker>
  </div>
</template>
<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";
export default {
  components: { DatePicker },
  data() {
    return {
      time: null
    };
  }
};
</script>

to do that.

We changed the type prop to datetime .

We can also change the date picker to let us select a start and end date all at once.

So we can write:

<template>
  <div>
    <date-picker v-model="time" range></date-picker>
  </div>
</template>
<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";
export default {
  components: { DatePicker },
  data() {
    return {
      time: null
    };
  }
};
</script>

We used the range prop to do that.

It provides us with many other options like popup style, steps, day and time format, class names, and much more.

vue-virtual-scroll-list

vue-virtual-scroll-list lets us add a virtual scroll list to only render list items when they’re shown.

To use it, we first install it by running:

npm i vue-virtual-scroll-list

Then we can use it bu writing:

App.vue

<template>
  <div>
    <virtual-list
      style="height: 360px; overflow-y: auto;"
      :data-key="'uid'"
      :data-sources="items"
      :data-component="itemComponent"
      :extra-props="{ otherPropValue: other }"
    />
  </div>
</template>

<script>
import Item from "./components/Item";
import VirtualList from "vue-virtual-scroll-list";

export default {
  name: "root",
  data() {
    return {
      itemComponent: Item,
      items: Array(1000)
        .fill()
        .map((a, i) => ({ uid: "1", text: `row ${i}` })),
      other: "foo"
    };
  },
  components: { "virtual-list": VirtualList }
};
</script>

components/Item.vue

<template>
  <div class="hello">{{source.text}}</div>
</template>

<script>
export default {
  props: ["source"]
};
</script>

We get the item to display from the source prop.

App has the virtua-list component to display the virtual scroll list.

otherPropValue is a prop that we pass to Item via the exta-props prop.

So we can write:

<template>
  <div class="hello">{{source.text}} {{otherPropValue}}</div>
</template>

<script>
export default {
  props: ["source", "otherPropValue"]
};
</script>

to get the other value.

Now only what’s displayed on the screen will be rendered.

This is handy for displaying big lists in a performant manner.

Conclusion

Vue Datetime Picker and vue2-datepicker let us add date pickers to our app.

vue-virtual-scroll-list is a library to lets us create virtual scroll lists, which lazyload items.