@teamnovu/vue-responsive-image

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}x1000"
  :screens="{
    xs: '360px',
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px'
  }"
  :max-width="3000"
  sizes="w-90vw md:w-60vw 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	100vw for each breakpoint	Any vw value for each breakpoint	Viewport-width to further shrink image on each breakpoint.

Development

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

Release

1. yarn release
2. npm publish

Features Planned

• [ ] Image Ratio
• [ ] Breakpoints from tailwindcss config

License

MIT License

Copyright (c) teamnovu