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.
