Categories
Top Vue Packages

Top Vue Packages for Handling Touch Events, Masonry Grid, and More

Spread the love

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 handling touch events, adding a masonry grid, adding Github buttons, and an HTML5 editor.

vue-hammer

vue-hammer is a component that lets us handle touch events.

To use it, we install it by running:

npm i vue2-hammer

Then we can use it by running:

main.js

import Vue from "vue";
import App from "./App.vue";
import { VueHammer } from "vue2-hammer";
Vue.use(VueHammer);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <a v-hammer:tap="onTap">Tap me!</a>
  </div>
</template>

<script>
export default {
  methods: {
    onTap() {
      console.log('tapped');
    }
  }
};
</script>

We register the plugin and use the v-hammer:tap directive to detect taps on it.

Then onTap will run.

It can watch other events like panning, presses, and more.

vue-masonry-css

We can use the vue-masonry-css to display items in a grid.

To install it, we run:

npm i vue-masonry-css

to install it.

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueMasonry from "vue-masonry-css";

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

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

App.vue

<template>
  <div>
    <masonry :cols="3" :gutter="30">
      <div v-for="item in 100" :key="item">Item: {{item}}</div>
    </masonry>
  </div>
</template>

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

We use the masonry component to put the elements in a grid.

We can put anything inside it.

cols is the number of columns to display.

gutter is the gap between each column.

Vue GitHub Buttons

Vue GitHub Buttons let us add Github buttons into our Vue app to use it, we run:

npm i vue-github-buttons

to install it.

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueGitHubButtons from "vue-github-buttons";

import "vue-github-buttons/dist/vue-github-buttons.css";

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

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

App.vue

<template>
  <div>
    <gh-btns-watch slug="mertJF/tailblocks" show-count></gh-btns-watch>
    <gh-btns-star slug="mertJF/tailblocks" show-count></gh-btns-star>
    <gh-btns-fork slug="mertJF/tailblocks" show-count></gh-btns-fork>
  </div>
</template>

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

gh-btns-watch lets us get the number of watchers of a repo.

The slug is the repo name.

show-count shows the count.

gh-btns-star shows the number of stars on a repo.

gh-btns-fork shows the number of forks made on a repo.

The count is obtained automatically.

We can add useCache to the setting to use the cached values for the count instead of getting the value every time.

vue-html5-editor

vue-html5-editor is a HTML editor for Vue apps.

To use it, we run:

npm i vue-html5-editor

to install it.

Then we write the following:

index.html

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>

main.js

import Vue from "vue";
import App from "./App.vue";
import VueHtml5Editor from "vue-html5-editor";
Vue.use(VueHtml5Editor, {
  name: "vue-html5-editor",
  showModuleName: false,
  icons: {
    text: "fa fa-pencil",
    color: "fa fa-paint-brush",
    font: "fa fa-font",
    align: "fa fa-align-justify",
    list: "fa fa-list",
    link: "fa fa-chain",
    unlink: "fa fa-chain-broken",
    tabulation: "fa fa-table",
    image: "fa fa-file-image-o",
    hr: "fa fa-minus",
    eraser: "fa fa-eraser",
    undo: "fa-undo fa",
    "full-screen": "fa fa-arrows-alt",
    info: "fa fa-info"
  }
});
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <vue-html5-editor :content="content" :height="500"></vue-html5-editor>
  </div>
</template>

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

We add the vue-html-editor component to use it the editor.

Also, we add the Font Awesome CSS to add the icons.

Then we pass in the content to the editor.

We can also set an upload handler to handle image uploads.

Conclusion

vue-html5-editor is an HTML5 editor made for Vue.

Vue GitHub Buttons is a Github button component for Vue.

vue-hammer is a directive that handles touch events.

vue-masonry-css lets us create a masonry grid.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.