vue-retouch

Getting started

Register the library as a plugin

import Retouch from 'vue-retouch';
 
Vue.use(Retouch, {
  configuration: { serviceUrl: 'image-service-url' }
});

or import only components you need

import Retouch, { RetouchImage, RetouchTransformer } from 'vue-retouch';
 
Vue.use(Retouch, {
  configuration: { serviceUrl: 'http://localhost:3000/api/v1/images/' },
  components: { 
    RetouchImage, 
    RetouchTransformer
  }
});

Also, components can be imported locally

import { RetouchImage, RetouchTransformer } from 'vue-retouch';
 
export default {
  ...
  components: {
    RetouchImage,
    RetouchTransformer
  }
}

Components

RetouchImage

The component is used to display an image.

<retouch-image :name="name" service-url="" />

Props

• serviceUrl - Only required if the plugin's serviceUrl option is not provided; this value overrides global plugin's serviceUrl
• name - Unique image identifier
• alt - Image alt text

Slots

default
Used to send transformations

Example:

<retouch-image :name="name" />

RetouchTransformer

Used to perform transformations on the original image.

Examples:

<retouch-image :name="name">
  <retouch-transformer :width="400" :height="400" :sigma="5" :format="png" fit="inside" blur />
</retouch-image>

Also, multiple transformations can be chained as follows:

<retouch-image :name="name">
  <retouch-transformer :width="400" :height="400" fit="inside"/>
  <retouch-transformer :width="300" :height="250" crop />
  <retouch-transformer :sigma="1" blur />
  <retouch-transformer :quality="70" format="jpeg" />
</retouch-image>