vue-responsive-image

Make every Image Responsive to Shrink your Bundle Size

📖 Release Notes

Intro

DEMO

Vue Responsive Image helps you in making every image on your website responsive. Inspired by tailwindcss breakpoints it always scales the image down to fit the current breakpoint but still leaves you the flexibility to scale it down even further.

Requirements

Nothing, just go for it.

Setup

1. Add @teamnovu/vue-responsive-image as a dependency to your project

yarn add @teamnovu/vue-responsive-image

# or npm install @teamnovu/vue-responsive-image

2. Add the following code to your main.js

import ResponsiveImage from '@teamnovu/vue-responsive-image'

Vue.component('ResponsiveImage', ResponsiveImage)

Usage

Just use the <ResponsiveImage /> component where you would have a normal <img /> tag and pass in the props as follows.

<ResponsiveImage
  src="https://source.unsplash.com/random/{w}x{h}"
  :screens="{
    xs: '360px',
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px'
  }"
  :max-width="3000"
  sizes="w-90vw md:w-60vw md:h-9/16 xl:w-50vw"
/>

Available Props

Option	Type	Default	Options	Description
src	String	none	width: {w}	The source to be used for the image with {w} where the width should go.
maxWidth	Number	2560	Any Number	The maximum width used to calculate the image width on the biggest breakpoint.
screens	Object	{ sm: '640px', md: '768px', lg: '1024px', xl: '1280px' }	An key pixel value pairs	The breakpoints to be used.
sizes	String	w-Xvw, `h-(full	x/y)` for each breakpoint	Any vw value for width and any fraction for height for each breakpoint

Development

1. Clone this repository
2. Install dependencies using yarn install
3. Start development server using yarn serve

Release

1. yarn release
2. npm publish

Features Planned

• Image Ratio
• Breakpoints from tailwindcss config

License

MIT License

Copyright (c) teamnovu