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:
​Setting up ImageKit Vue.js SDK​
​Rendering images​
​Applying common image manipulations​
​Adding overlays to images​
​Lazy loading images​
​Blurred image placeholder​
​Client-side file uploading​
Setup ImageKit Vue.js SDK
Install Vue CLI
npm install -g @vue/cli
# OR
yarn global add @vue/cli
Create a project
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:
Install imagekitio-vue
npm install imagekitio-vue
# OR
yarn add imagekitio-vue
Initialize SDK
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 and authenticationEndpoint 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-image for image resizing. The output is a <img> tag.
ik-upload for file uploading. The output is a <input type="file"> tag.
​ik-context for defining urlEndpoint, publicKey and authenticationEndpoint to all children elements.
You can also import components individually.
import { IKImage, IKContext, IKUpload } from "imagekitio-vue"
​
export default {
  components: {
    IKImage,
    IKContext,
    IKUpload
  }
}
Rendering images in Vue.js
Loading image using a relative path
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:
Loading image from an absolute path
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:
Common image manipulation in Vue.js
This section covers the basics:
​Resizing images​
​Quality manipulation​
​Chained transformation​
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.
Resizing images in Vue.js
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:
Quality manipulation
You can use the quality parameter to change quality like this:
<ik-image 
  path="/default-image.jpg" 
  :transformation="[{quality: 40}]" />
The output is:
Chained transformation
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:
Adding overlays to images in Vue.js
ImageKit.io allows you to can add text and image overlay dynamically.
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:
Lazy-loading images in Vue.js
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"
/>
Blurred image placeholder
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}"
/>
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.
// 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"
/>
Uploading files in Vue.js
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, and expire. 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:
We will use the ImageKit Node.js SDK to implement http://localhost:3001/auth.
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:
What's next
The possibilities for image manipulation and optimization with ImageKit are endless. Learn more about it here:
​Image Transformations​
​Image optimization​
​Media Library​
​Performance monitoring​
Pure Python
Next.js
Last modified 10mo ago