1.0.8 • Published 5 years ago
vue-sizeme v1.0.8
vue-sizeme
A Vue3 hook that uses Vue's composition api to make components aware of their width and height.
Installation
At this point in time Vue version 3 is not released yet so you have to use the Vue composition api plugin in order for this to work.
yarn add @vue/composition-api vue-sizeme
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)
The useWithSize hook takes an element ref as the first argument.
<template>
<div ref="root">
{{size}}
</div>
</template>
<script>
import { useWithSize } from 'vue-sizeme'
import { ref } from '@vue/composition-api'
export default {
setup() {
const root = ref(null)
const size = useWithSize(root)
// size => {width,height}
return {
root,
size
}
}
}
</script>