Vue Responsive Image Helpers

This is just a simple vue plugin to make working with (responsive) images a bit easier.

Keep in mind that it is meant mostly for personal use, and it is at the moment tailored for Bulma's breakpoints and imgix API.

Usage

The plugin adds 3 simple utility functions to the Vue global scope which helps you create values for img src, srcset, and sizes attributes.

$createSrc(src, [options])

• src: Base URL for the image
• [options]: {width = 1600, fit = 'crop', heightRatio = .5625, suffix = ''}

$createSrcSet(src, [options])

• src: Base URL for the image
• [options]: {fit = 'crop', heightRatio = .5625, max = 1600, min = 100, increment = 100, suffix = ''}

$createSizes([options])

• [options]: {desktop = '50vw', tablet = '75vw', mobile = '100vw'}

Sorry for the simple documentation. Then again it's mostly meant for personal use.