An easy way to capture and preview files in vue.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @hazin/vue-pic-video in KB



An easy way to capture and preview files in vue.

Getting Started

Import the component and style it as you wish!

npm i --save @hazin/vue-pic-video
yarn add @hazin/vue-pic-video
import vuePicVideo from '@hazin/vue-pic-video'


  <div class="hello">
    <vue-pic-video :accept="'image/*'" @preview="previewImage" @value="captureFile">
      <button>Upload image</button>
    <img :src="image" width="200px" height="200px" alt="">
    <vue-pic-video :accept="'video/*'" @preview="previewVideo" @value="captureFile">
      <button>Upload video</button>
    <video :src="video" width="200px" controls></video>
import vuePicVideo from '@hazin/vue-pic-video'

export default {
  data () {
    return {
      image: '',
      video: ''
  components: {
  methods: {
    previewImage (preview) { this.image = preview }, // Binds the image to show in <image> tag
    previewVideo (preview) { this.video = preview }, // Binds the video to show in <video> tag
    captureFile: value => { console.log(value) } // Log the file Object


Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.


See also the list of contributors who participated in this project.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.