Vue Media Manager
A stand-alone Vue.js Media Manager/Library.
A companion package exists for Laravel which can be used as a back-end service for this Media Manager Library, or you can create your own compatible server-side package to work with the Vue Media Manager.
This library is in the early-stages of development and has a number of requirements which we would like to eventually make less restrictive.
Dependencies
- axios ~0.17
- vue2-dropzone ~3.0
- vuetify ~1.0
- Compatible back-end
Installation
npm install @thesold/vue-media-manager
Usage
Import the Library and load it into Vue.
import VueMediaManager from '@thesold/vue-media-manager'
Vue.use(VueMediaManager)Now you can use the <media-manager></media-manager> tag to initialize an instance of the Media Manager.
<media-manager
api="https://myapp.localhost/mediamanager"
library="demo"
v-model="booleanToDetermineOpenState"
width="800"
height="600"
gravity="auto"
@mediaSelected="image => console.log(image)"
>Parameters
| Param | Value | Description |
|---|---|---|
| api | myapp.localhost/mediamanager | The server-side URL of the endpoint to handle requests |
| library | default | A string key to identify the name of the Media Library |
| v-model | boolean | A reactive parameter to determine the open state of the media manager |
| width | 800 | The desired width (in px) of the image to be returned |
| height | 600 | The desired height (in px) of the image to be returned |
| gravity | auto | The crop/resize mode to be used (values depend on library driver) |
Events
| Key | Value | Description |
|---|---|---|
| mediaSelected | myapp.localhost/images/foo.png | Returns the full URL to the selected image |