ImageKit.io Vue.js SDK

ImageKit Vue.js SDK allows you to use real-time image resizing, optimization, and file uploading in client-side.

Breaking changes

Upgrading from 2.x to 3.x version

1. Overlay syntax update

• In version 3.0.0, we've removed the old overlay syntax parameters for transformations, such as oi, ot, obg, and more. These parameters are deprecated and will start returning errors when used in URLs. Please migrate to the new layers syntax that supports overlay nesting, provides better positional control, and allows more transformations at the layer level. You can start with examples to learn quickly.
• You can migrate to the new layers syntax using the raw transformation parameter.

Upgrading from 1.x to 2.x version

2.x version has breaking changes as listed below.

1. In version 2.0.1, three global components, namely ik-image, ik-upload, and ik-context, are no longer supported. Instead, it is recommended to import these components individually.

   1
   2import { IKImage, IKContext, IKUpload } from "imagekitio-vue"
   3
   4export default {
   5  components: {
   6    IKImage,
   7    IKContext,
   8    IKUpload
   9  }
   10}
   11

2. We have deprecated the use of the authenticationEndpoint parameter. Instead, the SDK has introduced a new parameter named authenticator. This parameter expects an asynchronous function that resolves with an object containing the necessary security parameters i.e signature, token, and expire.

   An example implementation for authenticator using Fetch API.

   1
   2 const authenticator = async () => {
   3    try {
   4
   5        // You can also pass headers and validate the request source in the backend, or you can use headers for any other use case.
   6        const headers = {
   7          'CustomHeader': 'CustomValue'
   8        };
   9
   10        const response = await fetch('server_endpoint', {
   11            headers
   12        });
   13
   14        if (!response.ok) {
   15            const errorText = await response.text();
   16            throw new Error(`Request failed with status ${response.status}: ${errorText}`);
   17        }
   18
   19        const data = await response.json();
   20        const { signature, expire, token } = data;
   21        return { signature, expire, token };
   22    } catch (error) {
   23        throw new Error(`Authentication request failed: ${error.message}`);
   24    }
   25};

Note: Avoid generating security parameters on the client side. Always send a request to your backend to retrieve security parameters, as the generation of these parameters necessitates the use of your Imagekit privateKey, which must not be included in client-side code.

IMAGEKIT-VUEJS VERSION	VUEJS VERSION
^2.0.1	^3.0.0
1.0.9	^2.6.12
1.0.5 and below	^2.6.11

Installation

1npm install --save imagekitio-vue

or

1yarn add imagekitio-vue

Usage

Initialization

Import components in your code:

1import { IKImage, IKUpload, IKContext, IKVideo, } from 'imagekitio-vue'

Quick examples

1
2<IKContext urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
3  // Render an image using a relative path - https://ik.imagekit.io/your_imagekit_id/default-image.jpg
4  <IKImage path="/default-image.jpg" />
5  // Overriding urlEndpoint defined in parent IkContext - https://www.custom-domain.com/default-image.jpg
6  <IKImage urlEndpoint="https://www.custom-domain.com" path="/default-image.jpg" />
7  // Render an image using an absolute URL - https://www1.custom-domain.com/default-image.jpg?tr=w-100
8  <IKImage src="https://www1.custom-domain.com/default-image.jpg?tr=w-100" />
9  // Height and width manipulation - https://ik.imagekit.io/your_imagekit_id/tr:h-200,w-200/default-image.jpg
10  <IKImage path="/default-image.jpg" :transformation={[{
11    "height": "200",
12    "width": "200"
13  }]} />
14  // Chained transformation - https://ik.imagekit.io/your_imagekit_id/tr:h-200,w-200:rt-90/default-image.jpg
15  <IKImage path="/default-image.jpg" :transformation={[{
16    "height": "200",
17    "width": "200",
18  },
19  {
20    "rotation": "90"
21  }]} />
22  // Lazy loading image
23  <IKImage
24    path="/default-image.jpg"
25    :transformation={[{
26      "height": "200",
27      "width": "200"
28    }]}
29    loading="lazy"
30  />
31  /*
32     Low-quality image placeholder
33     Will first load https://ik.imagekit.io/your_imagekit_id/tr:h-200,w-200:q-20,bl-6/default-image.jpg, while the original image, i.e., https://ik.imagekit.io/your_imagekit_id/tr:h-200,w-200/default-image.jpg is being loaded in the background.
34  */
35  <IKImage
36    path="/default-image.jpg"
37    :transformation={[{
38      "height": "200",
39      "width": "200"
40    }]}
41    :lqip={{ active: true }}
42  />
43  // Low quality image placeholder with custom quality and blur values
44  <IKImage
45    path="/default-image.jpg"
46    :transformation={[{
47      "height": "200",
48      "width": "200"
49    }]}
50    :lqip={{ active: true, quality: 20, blur: 10 }}
51  />
52  // Low quality image placeholder and lazy loading original image in the background
53  <IKImage
54    path="/default-image.jpg"
55    :transformation={[{
56      "height": "200",
57      "width": "200"
58    }]}
59    loading="lazy"
60    :lqip={{ active: true }}
61  />
62  // Video element with basic transaformation, reduced quality by 50% using q: 50
63
64  <IKVideo
65    path={'/default-video.mp4'}
66    :transformation={[{ height: 200, width: 200, q: 50 }]}
67    :controls={true}
68  />
69</IKContext>
70
71
72// Controlling quality and blur value of placeholder image
73<IKImage
74  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
75  path="/default-image.jpg"
76  :lqip="{active:true, quality:30, blur: 5}" // default values are quality=20 and blur=6
77  :transformation="[{height:300,width:400},{rotation:90}]"
78  loading="lazy"
79  height="300"
80  width="400"
81/>
82// This promise resolves with an object containing the necessary security parameters i.e `signature`, `token`, and `expire`.
83<IKContext publicKey="your_public_api_key" :authenticator="()=>Promise">
84  // Simple file upload and response handling
85  <IKUpload
86    :onError={onError}
87    :onSuccess={onSuccess}
88  />
89  // Passing different upload API options
90  <IKUpload
91    fileName="file-name.jpg"
92    :tags={["sample-tag1", "sample-tag2"]}
93    customCoordinates="10,10,10,10"
94    :isPrivateFile={false}
95    :useUniqueFileName={true}
96    :responseFields={["tags"]}
97    folder="/sample-folder"
98    :ref={uploadRef}
99    :onError={onError} 
100    :onSuccess={onSuccess}
101    :transformation="{
102      pre: 'l-text,i-Imagekit,fs-50,l-end', 
103      post: [
104          {
105              type: 'transformation', 
106              value: 'w-100'
107          }
108      ]
109    }"
110  />
111</IKContext>
112

Demo application

• The official step by step Vue.js quick start guide - https://docs.imagekit.io/getting-started/quickstart-guides/vuejs.

Components

This SDK provides 4 components:

• IKContext for defining options like urlEndpoint, publicKey or authenticator to all children elements. This component does not render anything.
• IKImage for image resizing. This renders a <img> tag.
• IKVideo for video resizing. This renders a <video> tag.
• IKUploadfor client-side file uploading. This renders a <input type="file"> tag.

If you want to do anything custom, access the ImageKit core JS SDK using IKCore module. For example:

1import { IKCore } from "imagekitio-vue"
2
3// Generate image URL
4var imagekit = new ImageKit({
5    publicKey: "your_public_api_key",
6    urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
7});
8
9//https://ik.imagekit.io/your_imagekit_id/endpoint/tr:h-300,w-400/default-image.jpg
10var imageURL = imagekit.url({
11    path: "/default-image.jpg",
12    urlEndpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/",
13    transformation: [{
14        "height": "300",
15        "width": "400"
16    }]
17});

IKContext

In order to use the SDK, you need to provide it with a few configuration parameters. You can use a parent IKContext component to define common options for all children IKImage, IKVideo or IKupload compoents. For example:

1<IKContext
2  :publicKey="your_public_api_key"
3  :urlEndpoint="your_url_endpoint"
4  :authenticator={()=>Promise} 
5  // This promise  resolves with an object containing the necessary security parameters i.e `signature`, `token`, and `expire`.
6>
7>
8  <IKUpload
9    :tags="['tag3','tag4']"
10    :responseFields="['tags']"
11    :onSuccess="onSuccess"
12  />
13</IKContext>

urlEndpoint is required to use the SDK. You can get URL-endpoint from your ImageKit dashboard - https://imagekit.io/dashboard#url-endpoints.

publicKey and authenticator parameters are required if you want to use the SDK for client-side file upload. You can get these parameters from the developer section in your ImageKit dashboard - https://imagekit.io/dashboard#developers.

transformationPosition is optional. The default value for this parameter is path. Acceptable values are path & query

Note: Do not include your Private Key in any client-side code, including this SDK or its initialization. If you pass the privateKey parameter while initializing this SDK, it throws an error

Image resizing

The IKImage component renders an img tag. It is used for rendering and manipulating images in real time. IKImage component accepts the following props:

Prop	Type	Description
urlEndpoint	String	Optional. The base URL to be appended before the path of the image. If not specified, the URL-endpoint specified in the parent IKContext component is used. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/
path	String	Conditional. This is the path at which the image exists. For example, /path/to/image.jpg. Either the path or src parameter needs to be specified for URL generation.
src	String	Conditional. This is the complete URL of an image already mapped to ImageKit. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/path/to/image.jpg. Either the path or src parameter needs to be specified for URL generation.
transformation	Array of objects	Optional. An array of objects specifying the transformation to be applied in the URL. The transformation name and the value should be specified as a key-value pair in the object. See list of different tranformations. Different steps of a chained transformation can be specified as the array's different objects. The complete list of supported transformations in the SDK and some examples of using them are given later. If you use a transformation name that is not specified in the SDK, it is applied in the URL as it is.
transformationPosition	String	Optional. The default value is path that places the transformation string as a URL path parameter. It can also be specified as query, which adds the transformation string as the URL's query parameter i.e.tr. If you use src parameter to create the URL, then the transformation string is always added as a query parameter.
queryParameters	Object	Optional. These are the other query parameters that you want to add to the final URL. These can be any query parameters and not necessarily related to ImageKit. Especially useful if you want to add some versioning parameter to your URLs.
loading	String	Optional. Pass lazy to lazy load images
lqip	Object	Optional. You can use this to show a low-quality blurred placeholder while the original image is being loaded e.g. {active:true, quality: 20, blur: 6}. The default value of quality is 20 and blur is 6.

Basic resizing examples

1// Image from related file path with no transformations - https://ik.imagekit.io/your_imagekit_id/default-image.jpg
2<IKContext urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
3  <IKImage
4    path="/default-image.jpg"
5  />
6
7  // Image resizing - https://ik.imagekit.io/your_imagekit_id/tr:w-h-300,w-400/default-image.jpg
8  <IKImage
9    path="/default-image.jpg"
10    :transformation="[{height:300,width:400}]"
11  />
12
13  // Loading imgae from an absolute file path with no transformations - https://www.custom-domain.com/default-image.jpg
14  <IKImage
15    src="https://www.custom-domain.com/default-image.jpg"
16  />
17
18  // Using a new tranformation parameter which is not there in this SDK yet - https://ik.imagekit.io/your_imagekit_id/tr:custom-value/default-image.jpg
19  <IKImage
20    path="/default-image.jpg"
21    :transformation="[{custom: 'value'}]"
22  />
23</IKContext>

The transformation prop is an array of objects. Each object can have the following properties. When you specify more than one object, each object is added as a chained transformation. For example:

1// It means first resize the image to 400x400 and then rotate 90 degree
2transformation = [
3  {
4    height: 400,
5    width: 400
6  },
7  {
8    rotation: 90
9  }
10]

See the complete list of transformations supported in ImageKit here. The SDK gives a name to each transformation parameter e.g. height for h and width for w parameter. It makes your code more readable. If the property does not match any of the following supported options, it is added as it is.

Adding overlays

ImageKit.io enables you to apply overlays to images and videos using the raw parameter with the concept of layers. The raw parameter facilitates incorporating transformations directly in the URL. A layer is a distinct type of transformation that allows you to define an asset to serve as an overlay, along with its positioning and additional transformations.

Text as overlays

You can add any text string over a base video or image using a text layer (l-text).

For example:

1<IKImage
2    path="/default-image.jpg"
3    urlEndpoint="https://ik.imagekit.io/your_imagekit_id/endpoint/"
4    :transformation="[{ "width": 400, "height": 300, "raw": "l-text,i-Imagekit,fs-50,l-end" }]"
5/>

Sample Result URL

https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-text,i-Imagekit,fs-50,l-end/default-image.jpg

Image as overlays

You can add an image over a base video or image using an image layer (l-image).

For example:

1<IKImage
2    path="/default-image.jpg"
3    urlEndpoint="https://ik.imagekit.io/your_imagekit_id/endpoint/"
4    :transformation="[{ "width": 400, "height": 300, "raw": "l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end" }]"
5/>

Sample Result URL

https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end/default-image.jpg

Solid color blocks as overlays

You can add solid color blocks over a base video or image using an image layer (l-image).

For example:

1<IKVideo
2    path="/img/sample-video.mp4"
3    urlEndpoint="https://ik.imagekit.io/your_imagekit_id/endpoint/"
4    :transformation="[{ "width": 400, "height": 300, "raw": "l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end" }]"
5/>

Sample Result URL

https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end/img/sample-video.mp4

Arithmetic expressions in transformations

ImageKit allows use of arithmetic expressions in certain dimension and position-related parameters, making media transformations more flexible and dynamic.

For example:

1<IKImage
2    path="/default-image.jpg"
3    urlEndpoint="https://ik.imagekit.io/your_imagekit_id/"
4    :transformation="[{
5        "height": "ih_div_2",
6        "width": "iw_div_4",
7        "border": "cw_mul_0.05_yellow"
8    }]"
9/>

Sample Result URL

https://ik.imagekit.io/your_imagekit_id/default-image.jpg?tr=w-iw_div_4,h-ih_div_2,b-cw_mul_0.05_yellow

List of supported transformations

Expand

Supported Transformation Name	Translates to parameter
height	h
width	w
aspectRatio	ar
quality	q
crop	c
cropMode	cm
x	x
y	y
focus	fo
format	f
radius	r
background	bg
border	b
rotation	rt
blur	bl
named	n
progressive	pr
lossless	lo
trim	t
metadata	md
colorProfile	cp
defaultImage	di
dpr	dpr
effectSharpen	e-sharpen
effectUSM	e-usm
effectContrast	e-contrast
effectGray	e-grayscale
effectShadow	e-shadow
effectGradient	e-gradient
original	orig
raw	The string provided in raw will be added to the URL as it is.

Chained Transforms

Chained transforms make it easy to specify the order the transform is applied. For example:

1// Using chained transformation. First, resize and then rotate the image to 90 degrees.
2<IKImage
3  path="/default-image.jpg"
4  :transformation="[{height:300,width:400}, {rotation:90}]"
5/>

Lazy loading images

You can lazy load images using the loading prop. When you use loading="lazy", all images that are immediately viewable without scrolling load normally. Those that are far below the device viewport are only fetched when the user scrolls near them.

The SDK uses a fixed threshold based on the effective connection type to ensure that images are loaded early enough so that they have finished loading once the user scrolls near to them.

On fast connections (e.g 4G), the value of threshold is 1250px and on slower connections (e.g 3G), it is 2500px.

You should always set the height and width of image element to avoid layout shift when lazy-loading images.

Example usage:

1// Lazy loading images
2<IKImage
3  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
4  path="/default-image.jpg"
5  :transformation="[{height:300,width:400},{rotation:90}]"
6  loading="lazy"
7  height="300"
8  width="400"
9/>

Low-quality image placeholders (LQIP)

To improve user experience, you can use a low-quality blurred variant of the original image as a placeholder while the original image is being loaded in the background. Once the loading of the original image is finished, the placeholder is replaced with the original image.

1// Loading a blurred low quality image placeholder while the original image is being loaded
2<IKImage
3  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
4  path="/default-image.jpg"
5  :lqip="{active:true}"
6/>

By default, the SDK uses the quality:20 and blur:6. You can change this. For example:

1<IKImage
2  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
3  path="/default-image.jpg"
4  :lqip="{active:true, quality: 40, blur: 5}"
5/>

Combining lazy loading with low-quality placeholders

You have the option to lazy-load the original image only when the user scrolls near them. Until then, only a low-quality placeholder is loaded. This saves a lot of network bandwidth if the user never scrolls further down.

1// Loading a blurred low quality image placeholder and lazy-loading original when user scrolls near them
2<IKImage
3  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
4  path="/default-image.jpg"
5  :transformation="[{height:300,width:400},{rotation:90}]"
6  :lqip="{active:true}"
7  loading="lazy"
8  height="300"
9  width="400"
10/>

Overriding urlEndpoint for a particular image

You can use urlEndpoint prop in an individual IKImage to change url for that image. For example:

1<IKContext urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
2  // Changing urlEndpoint
3  // https://www.custom-domain.com/tr:w-400,h-300/default-image.jpg
4  <IKImage
5    path="/default-image.jpg"
6    :transformation="[{height:300,width:400}]"
7    urlEndpoint="https://www.custom-domain.com"
8  />
9
10  // Without urlEndpoint
11  // https://ik.imagekit.io/your_imagekit_id/tr:w-400,h-300/default-image.jpg
12  <IKImage
13    path="/default-image.jpg"
14    :transformation="[{height:300,width:400}]"
15  />
16</IKContext>

Video resizing

The IKVideo component renders a video tag. It is used for rendering and manipulating videos in real-time. IKVideo component accepts the following props:

Prop	Type	Description
urlEndpoint	String	Optional. The base URL to be appended before the path of the video. If not specified, the URL-endpoint specified in the parent IKContext component is used. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/
path	String	Conditional. This is the path at which the video exists. For example, /path/to/video.mp4. Either the path or src parameter needs to be specified for URL generation.
src	String	Conditional. This is the complete URL of a video already mapped to ImageKit. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/path/to/video.mp4. Either the path or src parameter needs to be specified for URL generation.
transformation	Array of objects	Optional. An array of objects specifying the transformation to be applied in the URL. The transformation name and the value should be specified as a key-value pair in the object. See list of different tranformations. The complete list of supported transformations in the SDK and some examples of using them are given later. If you use a transformation name that is not specified in the SDK, it gets applied as it is in the URL.
transformationPosition	String	Optional. The default value is path, which places the transformation string as a path parameter in the URL. It can also be specified as query, which adds the transformation string as the query parameter tr in the URL. If you use the src parameter to create the URL, then the transformation string is always added as a query parameter.
queryParameters	Object	Optional. These are the other query parameters that you want to add to the final URL. These can be any query parameters and are not necessarily related to ImageKit. Especially useful if you want to add some versioning parameters to your URLs.

Basic video resizing examples

1<IKContext urlEndpoint="https://ik.imagekit.io/demo/your_imagekit_id">
2  // Video from related file path with no transformations - https://ik.imagekit.io/demo/your_imagekit_id/sample-video.mp4
3  <IKVideo
4    path="/sample-video.mp4"
5  />
6  // Video resizing - https://ik.imagekit.io/demo/your_imagekit_id/tr:w-h-300,w-400/sample-video.mp4
7  <IKVideo
8    path="/sample-video.mp4"
9    transformation={[{
10      height:300,
11      width:400
12    }]}
13  />
14  // Loading video from an absolute file path with no transformations - https://www.custom-domain.com/default-video.mp4
15  <IKVideo
16    src="https://www.custom-domain.com/default-video.mp4"
17  />
18  // Using a new tranformation parameter which is not there in this SDK yet - https://ik.imagekit.io/demo/your_imagekit_id/tr:custom-value/sample-video.mp4
19  <IKVideo
20    path="/sample-video.mp4"
21    transformation={[{
22      custom: 'value'
23    }]}
24  />
25</IKContext>

The transformation prop is an array of objects. Each object can have the following properties.

1// It means first resize the video to 400x400 and then rotate 90 degree
2transformation = [
3  {
4    height: 400,
5    width: 400,
6    rt: 90
7  }
8]

File Upload

The SDK provides the IKUpload component to upload files to the ImageKit Media Library.

IKUpload component accepts the ImageKit Upload API options as props.

Prop	Type	Description
fileName	String	Optional. If not specified, the file system name is picked.
useUniqueFileName	Boolean	Optional. Accepts true of false. The default value is true. Specify whether to use a unique filename for this file or not.
tags	Array of string	Optional. Set the tags while uploading the file e.g. ["tag1","tag2"]
folder	String	Optional. The folder path (e.g. /images/folder/) in which the file has to be uploaded. If the folder doesn't exist before, a new folder is created.
isPrivateFile	Boolean	Optional. Accepts true of false. The default value is false. Specify whether to mark the file as private or not. This is only relevant for image type files
customCoordinates	String	Optional. Define an important area in the image. This is only relevant for image type files. To be passed as a string with the x and y coordinates of the top-left corner, and width and height of the area of interest in format x,y,width,height. For example - 10,10,100,100
responseFields	Array of string	Optional. Values of the fields that you want upload API to return in the response. For example, set the value of this field to ["tags", "customCoordinates", "isPrivateFile"] to get value of tags, customCoordinates, and isPrivateFile in the response.
extensions	Array of object	Optional. Array of object for applying extensions on the image.
webhookUrl	String	Optional. Final status of pending extensions will be sent to this URL.
overwriteFile	Boolean	Optional. Default is true. If overwriteFile is set to false and useUniqueFileName is also false, and a file already exists at the exact location, upload API will return an error immediately.
overwriteAITags	Boolean	Optional. Default is true. If set to true and a file already exists at the exact location, its AITags will be removed. Set overwriteAITags to false to preserve AITags.
overwriteCustomMetadata	Boolean	Optional. Default is true. If the request does not have customMetadata , overwriteCustomMetadata is set to true and a file already exists at the exact location, exiting customMetadata will be removed. In case the request body has customMetadata, setting overwriteCustomMetadata to false has no effect and request's customMetadata is set on the asset.
customMetadata	Object	Optional. JSON key-value data to be associated with the asset.
ref	Reference	Optional. Reference to the core HTMLInputElement.
onUploadStart	Function callback	Optional. Called before the upload is started. The first and only argument is the HTML input's change event
onUploadProgress	Function callback	Optional. Called while an upload is in progress. The first and only argument is the ProgressEvent
validateFile	Function callback	Optional. Called before the upload is started to run custom validation. The first and only argument is the file selected for upload. If the callback returns true, the upload is allowed to continue. But, if it returns false, the upload is not done
onSuccess	Function callback	Optional. Called if the upload is successful. The first and only argument is the response JSON from the upload API. The request-id, response headers, and HTTP status code are also accessible using the $ResponseMetadata key that is exposed from the javascript sdk
onError	Function callback	Optional. Called if upload results in an error. The first and only argument is the error received from the upload API
urlEndpoint	String	Optional. If not specified, the URL-endpoint specified in the parent IKContext component is used. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/
publicKey	String	Optional. If not specified, the publicKey specified in the parent IKContext component is used.
authenticator	()=>Promise<{signature:string,token:string,expiry:number}>	Optional. If not specified, the authenticator specified in the parent IKContext component is used.
checks	String	Optional. Run server-side checks before uploading files. For example, "'file.size' < '1mb'" will check if the file size is less than 1 MB. Check Upload API docs to learn more. Notice the quotes around file.size and 1mb; otherwise, you will get an error Your request contains invalid syntax for the checks parameter.

Make sure that you have specified authenticator and publicKey in IKUpload or in the parent IKContext component as a prop. The authenticator expects an asynchronous function that resolves with an object containing the necessary security parameters i.e signature, token, and expire.

Sample file upload:

1<template>
2  <IKUpload 
3    :onUploadStart="onUploadStart" 
4    :onUploadProgress="onUploadProgress"
5    :tags="['tag1','tag2']"
6    :responseFields="['tags']"
7    :onError="onError"
8    :onSuccess="onSuccess"
9    customCoordinates="10,10,100,100"
10    :transformation="{
11      pre: 'l-text,i-Imagekit,fs-50,l-end', 
12      post: [
13          {
14              type: 'transformation', 
15              value: 'w-100'
16          }
17      ]
18    }"
19    checks= "'file.size' < '1mb'"
20  />
21</template>
22
23<script>
24import { IKUpload } from "imagekitio-vue"
25
26export default {
27  name: "app",
28  components: {},
29  data() {
30    return {};
31  },
32  methods: {
33    onError(err) {
34      console.log("Error");
35      console.log(err);
36    },
37    onSuccess(res) {
38      console.log("Success");
39      console.log(res);
40    }
41    onUploadProgress(evt) {
42      console.log("Inprogress ... ", evt);
43    };
44    onUploadStart(evt) {
45      console.log("Upload started");
46    },
47  }
48};
49</script>

Abort upload

ref can be passed to obtain access to the IKUpload component's instance. Calling the triggerAbortUpload method will abort the upload if any is in progress.

Example Usage

1<template>
2  <IKUpload 
3    ref="childComponentRef" 
4    :publicKey="publicKey" 
5    :urlEndpoint="urlEndpoint"
6    :authenticator="authenticator"
7    :tags="['tag1','tag2']"
8    :responseFields="['tags']"
9    :onError="onError"
10    :onSuccess="onSuccess"
11    customCoordinates="10,10,100,100"
12    :transformation="{
13      pre: 'l-text,i-Imagekit,fs-50,l-end', 
14      post: [
15          {
16              type: 'transformation', 
17              value: 'w-100'
18          }
19      ]
20    }"
21    checks= "'file.size' < '1mb'"
22  />
23  <button @click="abortChildUpload">Abort Child Upload</button>
24</template>
25
26<script>
27import { IKUpload } from "imagekitio-vue"
28
29export default {
30  name: "app",
31  components: {},
32  data() {
33    return {};
34  },
35  methods: {
36    onError(err) {
37      console.log("Error");
38      console.log(err);
39    },
40    onSuccess(res) {
41      console.log("Success");
42      console.log(res);
43    }
44    abortChildUpload() {
45      this.$refs.childComponentRef.triggerAbortUpload();
46      console.log("Upload aborted")
47    },
48  }
49};
50</script>

IKCore

Accessing the underlying ImageKit javascript SDK is possible using the IKCore import. For example:

1import { IKCore } from "imagekitio-vue"
2// Generate image URL
3var imagekit = new IKCore({
4    publicKey: "your_public_api_key",
5    urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
6});
7//https://ik.imagekit.io/your_imagekit_id/endpoint/tr:h-300,w-400/default-image.jpg
8var imageURL = imagekit.url({
9    path: "/default-image.jpg",
10    urlEndpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/",
11    transformation: [{
12        "height": "300",
13        "width": "400"
14    }]
15});

Support

For any feedback or to report any issues or general implementation support, please reach out to support@imagekit.io

Links

• Documentation
• Main website

License

Released under the MIT license.