Piio-images-vue NPM

Piio Images for Vuejs

Piio Images will allow you to easily optimize all your images based on your visitor's browser and screen-size. With thoughtful compression and new-generation formats, your images will have crisp quality and consume less data, including Lazy Loading, out of the box.

Piio Images will also improve your load time and reduce unnecessary network usage.

Effortless integration
Pixel-perfect responsive images
Thoughtful image compression
High DPI Support and Scalability
WebP and other new-generation formats and compatible with legacy browsers
Lazy loading integrated

Read more about Piio and register at https://app.piio.co/register

Getting started

NPM Installation

npm install piio-images-vue

Manual Installation

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

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

Import component

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

Vue.import Piio from 'piio-images-vue'
Vue.use(Piio)

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 Piio Domain Key you get from your dashboard at https://app.piio.co/

Usage

Image tag

Add the PiioElement with the tag attribute set as img and your image as path

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

Background image

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>

Picture

Add a PiioElement for each source you need inside the picture tag. Set tag as source and add any other attributes you need, e.g media attribute.

This example follows the Art Direction: Showing different images per device idea.

<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>