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 file uploader, draggable dialog, slides, and lightbox.
Vue-Transmit
Vue-Transmit is a handy file uploader widget for Vue apps.
To use it, we run:
npm i vue-transmit
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueTransmit from "vue-transmit";
Vue.use(VueTransmit);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<vue-transmit tag="section" v-bind="options" ref="uploader">
<div>
<button class="btn btn-primary" @click="triggerBrowse">Upload Files</button>
</div>
<template slot="files" slot-scope="props">
<div v-for="(file, i) in props.files" :key="file.id" :class="{'mt-5': i === 0}">
<div class="media">
<img :src="file.dataUrl" class="img-fluid d-flex mr-3">
</div>
</div>
</template>
</vue-transmit>
</div>
</template>
<script>
export default {
data() {
return {
options: {
acceptedFileTypes: ["image/*"],
url: "./upload",
clickable: false
}
};
},
methods: {
triggerBrowse() {
this.$refs.uploader.triggerBrowseFiles();
}
},
filters: {
json(value) {
return JSON.stringify(value, null, 2);
}
}
};
</script>
We use the vue-transmit component to add an upload button with a preview.
To display the preview, we populate the files slot to display the preview by using the dataUrl property.
We set the options for the modal by passing in the options with v-bind .
We set the acceptedFileTypes to set the file types the uploader accepts.
url is the URL to upload the data to.
It takes many other customization options that we can use to change how it behaves.
Drag and drop are also supported.
vue-dialog-drag
vue-dialog-drag is a draggable dialog for Vue apps.
To use it, we run:
npm i vue-dialog-drag
Then we write:
<template>
<div id="app">
<dialog-drag id="dialog-1">
<p>Test dialog</p>
</dialog-drag>
<drop-area [@drop](http://twitter.com/drop "Twitter profile for @drop")="drop">
<p>Drop Here</p>
</drop-area>
</div>
</template>
<script>
import DialogDrag from "vue-dialog-drag";
import DropArea from "vue-dialog-drag/dist/drop-area";
export default {
name: "app",
components: {
DialogDrag,
DropArea
},
methods: {
drop(id) {
console.log(id);
}
}
};
</script>
<style src="vue-dialog-drag/dist/vue-dialog-drag.css"></style>
<style src="vue-dialog-drag/dist/drop-area.css"></style>
<style src="vue-dialog-drag/dist/dialog-styles.css"></style>
to use it.
We use the built it dialog-drag and drop-area components with the built-in styles.
Now we can drag the dialog to the drop zone.
Vueper Slides
Vueper Slides is a slides library for Vue apps.
To install it, we run:
npm i vueperslides
Then we can use it by writing:
<template>
<div id="app">
<vueper-slides>
<vueper-slide v-for="n in 10" :key="n" :title="`title ${n}`" :content="`slide ${n}`"/>
</vueper-slides>
</div>
</template>
<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";
export default {
components: { VueperSlides, VueperSlide }
};
</script>
We use the vueper-slides component to show the slides.
Also, we have to import the CSS to load the style of the slides.
vueper-slide renders the slides.
We pass in the title to display the title and content to display the content.
vue-easy-lightbox
vue-easy-lightbox is a simple lightbox component for Vue apps.
To use it, we run:
npm i vue-easy-lightbox
to install it.
Then we write:
<template>
<div id="app">
<div>
<div v-for="(src, index) in imgs" :key="index" class="pic" @click="() => showImg(index)">
<img :src="src">
</div>
</div>
<vue-easy-lightbox :visible="visible" :imgs="imgs" :index="index" [@hide](http://twitter.com/hide "Twitter profile for @hide")="handleHide"></vue-easy-lightbox>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
index: 0,
imgs: [
"https://placeimg.com/300/300/any",
"https://placekitten.com/300/300"
]
};
},
methods: {
showImg(index) {
this.index = index;
this.visible = true;
},
handleHide() {
this.visible = false;
}
}
};
</script>
to add the images and the lightbox.
vue-easy-lightbox has the lightbox component.
We click on the image and we’ll see the image.
To customize it, we can populate various slots to change the lightbox content.
The toolbar slot changes the toolbar.
next-btn slot changes the next button.
prev-btn slot changes the previous button.
close-btn slot changes the close button.
We can also listen to the events that are emitted by the lightbox.
Conclusion
Vue-Transmit is an easy to use uploader component.
vue-dialog-drag is a draggable dialog box.
Vueper Slides lets us add slides to our app.
vue-easy-lightbox is a handy lightbox component.
