Using Piio Images in VueJS

Following this guide, you will be able to successfully optimize and deliver all your website images using Piio Images on Vue.

Get your Domain Key
Vue installation
Get your images to work

1. Get your Domain Key#

The Piio Images library uses a Domain Key to identify your website and where the images are hosted. If you haven't created an account and added your first domain, follow the steps after signing up for a free account here.

2. Vue installation#

NPM Installation#

npm install piio-images-vue

Manual Installation#

If you aren't using npm installation, you can install Piio Images manually by following these steps:

Download the directory Piio-images containing piio.js, piio.vue, piioElement.js and piioElement.vue from our repository
Load piio.js in your code

Include the Piio Images components#

Add the following line to import the component in your main.js:

Vue.component('Piio',  require('./components/piio/piio.vue').default);

Initialize the component by adding it to the App.vue:

  <Piio domain-key="DOMAIN-KEY"/>

Getting as result:

<template>
  <div id="app">
    <Piio domain-key="DOMAIN-KEY"/>
    <router-view/>
  </div>
</template>

Replace DOMAIN-KEY with the Domain Key for you domain. You can find your Domain Key on your dashboard at https://app.piio.co/

3. Get your images to work#

PiioElement is a Vue component that will replace the usage of img tags or other HTML elements when you want to load an image.

PiioElement properties

tag(required) - defines which HTML tag will be used [img|div|a|..]
path(required) - URL of the image to be optimized and rendered on the HTML element
Any HTML valid attribute - PiioElements will pass all the attributes to the final HTML element

HTML `<img>` tag#

Add the PiioElement with the tag attribute set as img and the URL of the image in the path attribute.

<PiioElement tag="img" path="https://piio.co/img/whypiio-hero@3x.png" alt="Piio Element" class="example-class"></PiioElement>

Background Images for `<div>` or other HTML tags#

Add the PiioElement with the tag attribute set as the element you want to have the background applied. You can add any other attributes and content to the element as it will be added.

Here is an example using an anchor tag:

<PiioElement path="https://piio.co/img/whypiio-hero@3x.png" tag="a" href="https://www.piio.co">
    <h1>Example content</h1>
</PiioElement>

HTML `<picture>` tag#

Each <source> inside your <picture> tag will be replaced with a PiioElement, the tag property will be set to source, and the URL of the image will be included in the path attribut

<picture>
  <PiioElement path="https://secureservercdn.net/198.71.233.106/w4y.80f.myftpupload.com/wp-content/uploads/2020/02/backpack-desktop.jpg" tag="source" media="(min-width:969px)">
  </PiioElement>
  <PiioElement path="https://secureservercdn.net/198.71.233.106/w4y.80f.myftpupload.com/wp-content/uploads/2020/02/backpack-mobile.jpg" tag="source" media="(max-width:969px)">
  </PiioElement>
  <PiioElement path="https://secureservercdn.net/198.71.233.106/w4y.80f.myftpupload.com/wp-content/uploads/2020/02/backpack-mobile.jpg" tag="img">
  </PiioElement>
</picture>

Hardcore#

If you don't want to use our components, you can take a look at the guide to integration Piio Images manually on any HTML based web application here.