@teamnovu/vue-responsive-image v0.0.1

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

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