# vue2-media-preview

> Vue2MediaPreview: Http component with Progress bar

Latest version **0.0.9** (published 2018-11-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue2-media-preview
pnpm add vue2-media-preview
yarn add vue2-media-preview
bun add vue2-media-preview
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2018-11-30 |
| First published | 2018-04-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.2.0 |
| Dependencies | 5 |
| Unpacked size | 304.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sanchit |
| Maintainers | san-kumar |
| Keywords | vue, bootstrap, Vue2MediaPreview, vue2-media-preview |

## Links

- npm: https://www.npmjs.com/package/vue2-media-preview
- Repository: https://github.com/san-kumar/vue2-media-preview
- Issues: https://github.com/san-kumar/vue2-media-preview/issues
- npm.io page: https://npm.io/package/vue2-media-preview

## Dependencies (5)

- [vue2-popup](https://npm.io/package/vue2-popup.md) ^0.0.5
- [vue2-utils](https://npm.io/package/vue2-utils.md) ^0.1.47
- [vue2-bg-image](https://npm.io/package/vue2-bg-image.md) ^0.0.9
- [vue2-mp3-player](https://npm.io/package/vue2-mp3-player.md) ^0.0.2
- [eslint-plugin-vue](https://npm.io/package/eslint-plugin-vue.md) ^5.0.0-beta.3

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.0.9 (latest) — 2018-11-30
- 0.0.8 — 2018-11-16
- 0.0.7 — 2018-11-10
- 0.0.6 — 2018-11-10
- 0.0.5 — 2018-11-10
- 0.0.3 — 2018-05-04
- 0.0.2 — 2018-04-28
- 0.0.1 — 2018-04-28

## README

# Vue2MediaPreview

> Vue Component for Vue 2.x

## Install

``` bash
    npm install vue2-media-preview --save
```

## Demo

For demo, please [see here](https://jsfiddle.net/superasn/e08wLyju/) 

## Usage

*1\. Import the component*

```
import Vue2MediaPreview from 'vue2-media-preview';
```

*2\.1 Use it globally*

```
Vue.use(Vue2MediaPreview);

// OR with options

Vue.use(Vue2MediaPreview, {baseURL: 'https://jsonplaceholder.typicode.com/', headers: {'X-API-KEY': 1234}});
```

*3\. Access it locally

```
<template>
    <vue2-media-preview ref="http" v-model="data" :error-fn="onError"></vue2-media-preview>
</template>
```

```
components: {
    'vue2-media-preview': Vue2MediaPreview
},

```

## Properties


## Example

    <template>
        <div id="app">
            <div class="container">
                <form>
                    <div class="form-group row">
                        <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
                        <div class="col-sm-10">
                            <vue2-media-button v-model="data.url1"></vue2-media-button>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                        </div>
                    </div>
                </form>
    
                <div>
                    <div>
                        Item #1:
                    </div>
    
                    <div>
                        Item #2:
                        <vue2-media-button v-model="data.url2"></vue2-media-button>
                    </div>
    
                    <div>
                        Item #3:
                        <vue2-media-button v-model="data.url3"></vue2-media-button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        import Vue from 'vue';
        import Vue2MediaPreview from '../src/index'
    
        Vue.use(Vue2MediaPreview, {});
    
        export default {
            name: 'app',
            data() {
                return {
                    data: {
                        url1: 'http://www.letsintern.com/blog/wp-content/uploads/2015/09/3050613-inline-i-6-googles-new-logo-copy-640x393.png',
                        url2: 'https://www.youtube.com/watch?v=UW_kKafCIsg&list=RDUW_kKafCIsg&start_radio=1',
                        url3: 'http://www.gravomaster.com/alarm/sounds/Chime.MP3'
                    },
                }
            },
            methods: {
                test() {
                    // code
                }
            },
        }
    </script>
    

## Contributing

Contributions are welcome

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
```

---
_Source: https://npm.io/package/vue2-media-preview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._