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 draggable and resizable elements, file uploading, text editor, displaying tree structures, and input mask.
v-file-upload
We can use the v-file-upload package to add a file upload component to our Vue app.
To use it, we run:
npm i v-file-upload
to install it.
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import FileUpload from "v-file-upload";
Vue.use(FileUpload);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<file-upload :url="url" :thumb-url="thumbUrl" :headers="headers" @change="onFileChange"></file-upload>
</template>
<script>
import Vue from "vue";
export default {
data() {
return {
url: "http://upload.url",
headers: { "access-token": "<your-token>" },
filesUploaded: []
};
},
methods: {
thumbUrl(file) {
return file.thumnbnail;
},
onFileChange(file) {
this.fileUploaded = file;
}
}
};
</script>
to use it.
We use the file-upload component.
We set the url prop to set the upload URL.
headers has the headers.
thumbUrl has the URL to the thumbnail.
Now we see a file selector on our screen.
vue-jstree
vue-jstree is a tree view for Vue apps.
To use it, we run:
npm i vue-jstree
to install it.
Then we write:
<template>
<div>
<v-jstree :data="data"></v-jstree>
</div>
</template>
<script>
import VJstree from "vue-jstree";
export default {
components: {
VJstree
},
data() {
return {
data: [
{
text: "apple",
children: [
{
text: "orange",
selected: true
},
{
text: "danger",
icon: "fa fa-warning icon-state-danger"
}
]
},
{
text: "grape"
}
]
};
}
};
</script>
to use it.
We use the v-jstree to include the tree view in our component.
The nodes are defined by arrays.
Each entry is an object with the text property for the text.
selected is an optional property to indicate selection.
icon os the class for the icon.
children is the class for the children.
We can change the icon class.
It takes a few props.
show-checkbox indicates whether to show a checkbox.
multiple lets us select multiple items.
collapse sets all tree nodes to the collapsed state.
loading-text is a loading function.
There are many more props it takes.
Vue-Trix Text Editor
Vue-Trix Text Editor is a rich text editor that we can use in our Vue app.,
To use it, we run:
npm i vue-trix
to install the package.
Then we write:
<template>
<div>
<VueTrix v-model="editorContent" placeholder="Enter content" localStorage/>
</div>
</template>
<script>
import VueTrix from "vue-trix";
export default {
components: {
VueTrix
},
data(){
return {
editorContent: ''
}
}
};
</script>
to add the editor.
We add the VueTrix component to add it to our app.
We set a value for the placeholder to add a placeholder.
v-model binds the inputted value to the editorContent state.
localStorage save the inputted text to local storage.
vue-drag-resize
vue-drag-resize is an easy to use plugin to let us add draggable and resizable elements.
We install it by running:
npm i vue-drag-resize
Then we write:
<template>
<div id="app">
<VueDragResize isActive :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
<p>{{ top }} х {{ left }}</p>
<p>{{ width }} х {{ height }}</p>
</VueDragResize>
</div>
</template>
<script>
import VueDragResize from "vue-drag-resize";
export default {
name: "app",
components: {
VueDragResize
},
data() {
return {
width: 0,
height: 0,
top: 0,
left: 0
};
},
methods: {
resize(newRect) {
this.width = newRect.width;
this.height = newRect.height;
this.top = newRect.top;
this.left = newRect.left;
}
}
};
</script>
to use it.
We use the VueDraggable component to create a draggable and resizable component.
isActive sets the component to be active.
We set the initial height with the h prop.
The w prop is the initial width.
We listen to the resizing and dragging events to get the values of the new dimensions.
Conclusion
v-file-upload is a file upload component.
vue-jstree lets us display tree structures.
Vue-Trix Text Editor is a rich text editor for Vue apps.
vue-drag-resize lets us drag and resize elements.
