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.
