Vue-holderjs NPM

vue-holder

A Vue.js directive for HolderJS. Holder renders image placeholders on the client side using SVG.

Installing

Install with yarn:

yarn add vue-holderjs

Install with npm:

npm install vue-holderjs --save-dev

Add as a dependency in your Vue app:

import VueHolder from 'vue-holderjs';
Vue.use(VueHolder);

Include from a CDN:

<script src="https://unpkg.com/vue-holderjs"></script>

Usage example

<template>
  <main>
    <!-- using without parameters (defaults to a 100% by 100% image to full the container) -->
    <div style="width:400px;height:100px">
      <img v-holder>
    </div>
    <!-- using object from the data object -->
    <img v-holder="holder">
    <!-- using string -->
    <img v-holder="'img=100px200?auto=yes&theme=social&text=Full width'">
    <!-- using object -->
    <img v-holder="{img:'150x150',theme: 'github', text:'150 Fixed!'}">
  </main>
</template>

<script>
import VueHolder from 'vue-holderjs';
Vue.use(VueHolder);
	
export default {
  name: 'Example',
  data () {
    return {
      holder: {
        img: '200x200',
        auto: 'yes',
        theme: 'vue'
      }
    }
  }
}
</script>

JSFiddle Example

Placeholder options

Holder options are set through an object.

theme: The theme to use for the placeholder.
random: Use random theme.
bg: Background color.
fg: Foreground (text) color.
text: Custom text. Example:
size: Custom text size. Defaults to pt units.
font: Custom text font.
align: Custom text alignment (left, right).
outline: Draw outline and diagonals for placeholder.
lineWrap: Maximum line length to image width ratio.

Themes

Holder includes the 6 default themes: sky, vine, lava, gray, industrial, and social and aditionals vue, facebook, twitter, youtube, tumblr, github, whatsapp

Important: When testing locally, font URLs must have a http or https protocol defined.

Important: Fonts served from locations other than public registries (i.e. Google Fonts, Typekit, etc.) require the correct CORS headers to be set. See How to use CDN with Webfonts for more details.

Fluid placeholders

Important: Percentages are specified with the p character, not with the % character.

Specifying a dimension in percentages creates a fluid placeholder that responds to media queries.

<img v-holder="'img=100px75?theme=social'">

By default, the fluid placeholder will show its current size in pixels. To display the original dimensions, i.e. 100%x75, set the textmode flag to literal like so: img=100px75?textmode=literal.