Skip to content
Create responsive components with ResizeObserver
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Apr 22, 2018
README.md Update README.md Apr 23, 2018
index.js
package.json
yarn.lock Initial commit Apr 22, 2018

README.md

vue-responsive-components

Create responsive components with ResizeObserver.

Idea

Check out my post on ITNEXT

Installation

npm install vue-responsive-components

(Optional) Add plugin globally

import Vue from "vue"
import { VueResponsiveComponents } from "vue-responsive-components"

Vue.use(VueResponsiveComponents)

It will add Responsive component and v-responsive directive

Usage

Responsive component with scoped slot

<template>
  <Responsive :breakpoints="{
    small: el => el.width <= 500
  }">
    <div slot-scope="el" :class="['post__item', { small: el.is.small }]">
      <img class="post__image" :src="post.image" />
      <div class="post__text">{{post.text}}</div>
    </div>
  </Responsive>
</template>

<script>
import { Responsive } from "vue-responsive-components"

export default {
  props: ["post"],
  components: { Responsive }
}
</script>

<style>
.post__item {
  display: flex;
}

.post__image {
  flex: 0 0 200px;
  height: 200px;
}

.post__item.small {
  flex-direction: column;
}

.post__item.small .post__image {
  flex: 0 auto;
  height: auto;
}
</style>

v-responsive directive

Thanks to this guy for idea

<template>
  <!-- Will add/remove .small if the width is less / greater -->
  <div class="post__item" v-responsive="{ small: el => el.width <= 500 }">
    <img class="post__image" :src="post.image" />
    <div class="post__text">{{post.text}}</div>
  </div>
</template>

<script>
import { ResponsiveDirective } from "vue-responsive-components"

export default {
  props: ["post"],
  directives: {
    responsive: ResponsiveDirective
  }
}
</script>

Mixin

<template>
  <div :class="['post__item', { small: el.is.small }]">
    <img class="post__image" :src="post.image" />
    <div class="post__text">{{post.text}}</div>
  </div>
</template>

<script>
import { ResponsiveMixin } from "vue-responsive-components"

export default {
  props: ["post"],
  mixins: [ResponsiveMixin],
  breakpoints: {
    small: el => el.width <= 500
  }
}
</script>

License

MIT

You can’t perform that action at this time.