📐 vue-sync-size

Vue directive which allows to synchronize element sizes.

Installation

# via npm:
npm i vue-sync-size

# or yarn:
yarn add vue-sync-size

Usage

Connect to Vue app

import { createApp } from 'vue'
import VueSyncSize from 'vue-sync-size'

app.directive('sync', VueSyncSize())

Call in component

Directive syntax is pretty straightforward: v-sync:[side]="reference":

<template>
  <div ref="a">Reference element</div>
  <div v-sync:width="$refs.a">This element will have same width as reference</div>
</template>

side is optional and can be either width, height or both:

<template>
  <div ref="a">Reference element</div>
  <div v-sync:width="$refs.a">This element will have same width as reference</div>
  <div v-sync:height="$refs.a">This element will have same height as reference</div>
  <div v-sync="$refs.a">This element will have same width and height as reference</div>
  <div v-sync:both="$refs.a">Same as a `v-sync` without argument</div>
</template>

Absence of side works the same way as both.

Referencing a component

The reference can be not only an element but also a component:

<template>
  <some-component ref="a"/>
  <div v-sync:width="$refs.a"></div>
</template>

Sync with multiple elements

It's also possible to sync element sizes with different elements:

<template>
  <div ref="a"></div>
  <div ref="b"></div>
  <div v-sync:width="$refs.a" v-sync:height="$refs.b"></div>
</template>

Vue 2 support

By default the directive is created for Vue 3. Add version: 2 parameter to enable Vue 2 support:

Vue.directive('sync', VueSyncSize({ version: 2 }))

Dependencies

The package is based on ElementSizeObserver, which is a wrapper around ResizeObserver.

Contribution

Feel free to open issues and pull-requests.