Vue.js Integration Guide

Sign up for ImageEngine

To implement ImageEngine’s image optimization for Vue.js, you will first need to sign up for an ImageEngine account, if you do not already have one. During the signup process, you will specify the website domain that will use ImageEngine and the origin URL for most images. For more information about signing up, please refer to this article: Getting Started: Signup.

Once signed up, you will be issued a unique delivery address following this pattern: “aabbcc.cdn.imgeng.in”. You may create Custom delivery addresses after the initial signup process is complete.

Take note of your delivery address, as we will need it in the next step.

Advanced users: 

If you are comfortable with working with Vue components without needing additional direction here is the NPM documentation for the component: https://www.npmjs.com/package/@imageengine/vue

Setup Your Project

If you don’t have an existing vue app, make a new one using the Vue CLI

vue create image-engine-example

Next, install the Image Engine npm package 

npm i @imageengine/vue

Integrate ImageEngine Into Your App

We will only be working in the "App.vue". Make sure to delete all the code from it.

Import ImageEngine vue app 

Import the necessary package components and add them to your exported components by inserting the following code into "App.vue"

<script>
import {Image, ImageEngineProvider} from "@imageengine/vue";
export default {
  components: {
    ImageComponent: Image,
    ImageEngineProvider,
  },
<script>

Add the "ImageEngineProvider" component inside your app’s main div. Specifying this component allows all child components to access images from ImageEngine. 

Note: A "stripFromSrc" prop may be passed into the "ImageEngineProvider" which will remove all instances of that string in the "src" path of child images. This feature is useful to replace hostname references in the origin image URL, with the ImageEngine delivery address. For example, if an image has an absolute URL like “https://old.cdn.com/images/example.png”, and the “stripFromSrc” property is set to “https://old.cdn.com”, “https://old.cdn.com” will simply be replaced with the ImageEngine delivery address provided in the ‘deliveryAddress’ prop.

Insert Delivery Address

Make sure to modify the code below to insert your own "deliveryAddress" which is provided to you after signing up for an ImageEngine account. You can also find it in your ImageEngine dashboard.

<template>
 <div id="app">
 <ImageEngineProvider 
deliveryAddress="https://c4ltipq2.cdn.imgeng.in">
 {/* or, for local development:
     deliveryAddress="http://localhost:8080"
 */}
Your_App_Here…
 </ImageEngineProvider>
 </div>

Insert ImageComponent 

Lastly, insert an "ImageComponent" into the "ImageEngineProvider" and pass in a "src" prop with the path of the image.  Note that if you’re using a CMS which provides absolute image URLs, you may want to make use of the "stripFromSrc" prop explained above. For relative URLs, ensure that the URL is relative to the origin host’s root by referencing the full path starting with a "/".

   <ImageComponent src="/images/pic_2.jpg" />

Note: If your images are being hosted locally by your Vue app, then set your delivery address to “http://localhost:8080”. Now the "src" path of your images corresponds to the "public" folder in your Vue project. Using localhost as the origin will not provide any image optimization. Only images coming from ImageEngine will provide optimization.

Completed App.vue example

Your final App.vue should look like this:

<template>
 <div id="app">
 <ImageEngineProvider 
deliveryAddress="https://c4ltipq2.cdn.imgeng.in">
// or, for local development:
// deliveryAddress="http://localhost:8080"
   <ImageComponent src="/images/pic_2.jpg" />
 </ImageEngineProvider>
 </div>
</template>

<script>
import {Image, ImageEngineProvider} from "@imageengine/vue";
export default {
name: 'App',
components: {
   ImageComponent: Image,
   ImageEngineProvider,
 }
}
</script>

For more information, refer to the npm documentation

Using ImageEngine Directives

If you want more granular control over how the image is presented, you may use ImageEngine's directives. Use the "directives" prop to do so without having to modify the source image.

 <ImageComponent
          src="/images/pic_2.jpg"
          :attributes="{
            alt: 'test image',
          }"
          :directives="{
              outputFormat: 'webp',
              rotate: 45,
              inline: true
          }"/>

You can learn more about directives on our documentation page on the topic.

Testing

The easiest way to see if ImageEngine is serving your images is by opening the Chrome developer tools (or similar tool) and filtering the requests under the Network tab. You may have to refresh the page to see the results.  Find an image request expected to be served by ImageEngine and verify that ImageEngine is indeed serving the image by making sure that the 'Server' response HTTP header has the value “ScientiaMobile ImageEngine” For more information on locating ImageEngine served content, see this blog article: How to Inspect Images And See ImageEngine Optimization

Troubleshooting

If you are having trouble getting images to serve display properly on your website, the easiest way to troubleshoot is to concatenate the "deliveryAddress" of your project and the "src" of your image and then visit that URL in your browser directly.

For the example above, the delivery address is “blazing-fast-pics.cdn.imgeng.in” and the image path is “/images/pic_2.jpg”. Concatenating them together results in the valid image “https://blazing-fast-pics.cdn.imgeng.in/images/pic_2.jpg”.

 If no image comes up in your project, then you should check that your origin is correct in the ImageEngine console and that the images exist at that origin.