Vue.js placeholder-image

by uto usui

HTML

<div id="app"></div>

CSS

img {
  max-width: 100%;
}

Babel + JSX

let placeholdImage = Vue.extend({
  template:
  `<img :width="width" :src="url" alt="placeholder">`,
  props: {
    width: {
      type: Number,
      default: 1600
    },
    query: {
      type: String,
      default: 'random/1600x900'
    },
  },
  data: function() {
  	return {
  		url: 'https://source.unsplash.com/' + this.query
  	}
  }
});

let root = new Vue({

  template:
  `<div>
      <placehold-image :width="200" :query="'1600x900/?nature,water'"></placehold-image>
      <placehold-image></placehold-image>
   </div>`,

  components: {
    placeholdImage: placeholdImage
  }

});

root.$mount( '#app' );