Vue.js
Real-time image resizing, automatic optimization, and file uploading in Vue.js using ImageKit.io.
This is a quick start guide to show you how to integrate ImageKit in the Vue.js application. The code samples covered here are hosted on Github - https://github.com/imagekit-samples/quickstart/tree/master/vuejs.
This guide walks you through the following topics:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
Let's create a dummy project called vuejs using vue CLI.
vue create vuejs
It will prompt the vue version and a few other options, select default by pressing enter. It will create a dummy project like this:

npm install imagekitio-vue
# OR
yarn add imagekitio-vue
import ImageKit from "imagekitio-vue"
Vue.use(ImageKit, {
urlEndpoint: "your_url_endpoint",
// publicKey: "your_public_api_key",
// authenticationEndpoint: "https://www.your-server.com/auth"
})
urlEndpoint
is the required parameter. You can get the value of URL-endpoint from your ImageKit dashboard - https://imagekit.io/dashboard/url-endpoints.publicKey
andauthenticationEndpoint
parameters are optional and only needed 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/developer/api-keys.
Let's modify src/components/HelloWorld.vue to import and initialize ImageKit as a plugin. Replace
your_url_endpoint
etc, with actual values.src/components/HelloWorld.vue
<template>
<div>
<h1>ImageKit Vuejs quick start</h1>
</div>
</template>
<script>
import Vue from "vue"
import ImageKit from "imagekitio-vue"
Vue.use(ImageKit, {
urlEndpoint: "your_url_endpoint", // Required. Default URL-endpoint is https://ik.imagekit.io/your_imagekit_id
publicKey: "your_public_api_key", // optional
authenticationEndpoint: "https://www.your-server.com/auth" // optional
})
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
This SDK provides 3 global components when registered as a plugin:
-
ik-context
for definingurlEndpoint
,publicKey
andauthenticationEndpoint
to all children elements.
You can also import components individually.
import { IKImage, IKContext, IKUpload } from "imagekitio-vue"
export default {
components: {
IKImage,
IKContext,
IKUpload
}
}
Let's render an image at path
/default-image.jpg
.src/components/HelloWorld.vue
<template>
<div>
<h1>ImageKit Vuejs quick start</h1>
<ik-image width="400" path="/default-image.jpg">
</ik-image>
</div>
</template>
<script>
import Vue from "vue"
import ImageKit from "imagekitio-vue"
Vue.use(ImageKit, {
urlEndpoint: "https://ik.imagekit.io/demo"
})
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<ik-image width="400" path="/default-image.jpg">
renders to:
<img src="https://ik.imagekit.io/demo/default-image.jpg?ik-sdk-version=vuejs-1.0.6"
class="ik-image"
width="400">
The final result looks like this:

If you have an absolute image path coming from the backend API e.g.
https://www.custom-domain.com/default-image.jpg
then you can use src
prop to load the image.For example:
<ik-image
width="400"
src="https://ik.imagekit.io/demo/default-image.jpg" />
The output looks like this:

This section covers the basics:
The Vuejs 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 available options, it is added as it is. See the full list of supported transformations in Vuejs SDK on Github. Note that you can also use
👉
h
and w
parameter instead of height
and width
. See the complete list of transformations supported in ImageKit here.Let's resize the image to width 300 and height 300.
<ik-image
path="/default-image.jpg"
:transformation="[{width: 300, height: 300}]" />
The output looks like:

<ik-image
path="/default-image.jpg"
:transformation="[{quality: 40}]" />
The output is:

You can pass more than one object in
transformation
prop to chain these transformations sequentially.For example, the following values will first resize the image to width 300, height 300, and then rotate to 90 degrees.
// It means first resize the image to 400x400 and then rotate 90 degree
transformation = [
{
height: 300,
width: 300
},
{
rotation: 90
}
]
So the following:
<ik-image
path="/default-image.jpg"
:transformation="[{width: 300, height: 300}, {rotation: 90}]" />
renders to:

For example:
<ik-image
path="/default-image.jpg"
:transformation="[{
width: 300,
height: 300,
overlayImage: 'default-image.jpg',
overlayWidth: 100,
overlayX: 0,
overlayImageBorder: '10_CDDC39' // 10px border of color CDDC39
}]" />
Renders to:
<img src="https://ik.imagekit.io/pshbwfiho/tr:w-300,h-300,oi-default-image.jpg,ow-100,ox-0,oib-10_CDDC39/default-image.jpg?ik-sdk-version=vuejs-1.0.8" class="ik-image">
The output looks like:

You can lazy load images using the
loading
prop in ik-image
component. 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 the 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:
// Lazy loading images
<ik-image
path="/default-image.jpg"
:transformation="[{height:300,width:400}]"
loading="lazy"
height="300"
width="400"
/>
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.
// Loading a blurred low quality image placeholder while the original image is being loaded
<ik-image
path="/default-image.jpg"
:lqip="{active:true}"
/>
By default, the SDK uses the
quality:20
and blur:6
. You can change this. For example:<ik-image
path="/default-image.jpg"
:lqip="{active:true, quality: 40, blur: 5}"
/>
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.
// Loading a blurred low quality image placeholder and lazy-loading original when user scrolls near them
<ik-image
path="/default-image.jpg"
:transformation="[{height:300,width:400}]"
:lqip="{active:true}"
loading="lazy"
height="300"
width="400"
/>
Vuejs SDK provides
ik-upload
component which can generate an input type="file"
tag that you can use to upload files to the ImageKit media library directly from the client-side.For using upload functionality, we need to pass
publicKey
and authenticationEndpoint
while initializing the SDK. Replace your_url_endpoint
, your_public_key
, your_authentication_endpoint
with actual values.<script>
import Vue from "vue";
import ImageKit from "imagekitio-vue";
Vue.use(ImageKit, {
urlEndpoint: "your_url_endpoint",
publicKey: "your_public_key",
authenticationEndpoint: "your_authentication_endpoint"
});
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
authenticationEndpoint
should be implemented in your backend. The SDK makes an HTTP GET request to this endpoint and expects a JSON response with three fields i.e.signature
,token
, andexpire
. Learn how to implement authenticationEndpoint on your server.
For this quickstart guide, we have provided a sample implementation of
http://localhost:3001/auth
in Node.js.Let's create a file
index.js
inside server
folder in the project root. It should look like this:
Let's first install all basic modules we need to run an HTTP server.
npm install express
npm install imagekit
Let's modify index.js to implement
http://localhost:3001/auth
which is our authenticationEndpoint
.index.js (backend)
HelloWorld.vue (frontend)
server/index.js
/*
This is our backend server.
Replace your_url_endpoint, your_public_key, your_private_key
with actual values
*/
const express = require('express');
const app = express();
const ImageKit = require("imagekit");
const imagekit = new ImageKit({
urlEndpoint: "your_url_endpoint",
publicKey: "your_public_key",
privateKey: "your_privage_key"
})
app.get("/auth", function (req, res) {
var result = imagekit.getAuthenticationParameters();
res.send(result);
});
app.listen(3001, function () {
console.log("Live at Port 3001");
});
src/components/HelloWorld.vue
<script>
/*
This is our frontend code
Replace your_url_endpoint, your_public_key with actual values
*/
import Vue from "vue";
import ImageKit from "imagekitio-vue";
Vue.use(ImageKit, {
urlEndpoint: "your_url_endpoint",
publicKey: "your_public_key",
authencticationEndpiont: "http://localhost:3001/auth"
});
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
Let's run the backend server.
cd server
node index.js
If you GET http://localhost:3001/auth, you should see a JSON response like this. Actual values will vary.
{
token: "5dd0e211-8d67-452e-9acd-954c0bd53a1f",
expire: 1601047259,
signature: "dcb8e72e2b6e98186ec56c62c9e62886f40eaa96"
}
Let's include
ik-upload
component in the HelloWorld.vue
.<template>
<div>
<h1>ImageKit Vuejs quick start</h1>
<h2>File upload</h2>
<ik-upload
:onError="onError"
:onSuccess="onSuccess" />
</div>
</template>
<script>
/*
Replace your_url_endpoint, your_public_key with actual values
*/
import Vue from "vue";
import ImageKit from "imagekitio-vue";
Vue.use(ImageKit, {
urlEndpoint: "your_url_endpoint",
publicKey: "your_public_key",
authencticationEndpiont: "http://localhost:3001/auth"
});
export default {
name: "HelloWorld",
props: {
msg: String
},
methods: {
onError(err) {
console.log("Error");
console.log(err);
},
onSuccess(res) {
console.log("Success");
console.log(res);
}
}
};
</script>
The output looks like:

When you choose a file, the file is uploaded. You can pass optional
onSuccess
and onError
callback functions as props like we have.After successful upload, you should see the upload API response in the console like this:

The possibilities for image manipulation and optimization with ImageKit are endless. Learn more about it here:
Last modified 10mo ago