vue-100vh

vue100vh Vue component

This is a workaround for iOS Safari and other mobile browsers.

Forked from react-div-100vh by mvasin.

ViewDemo vue-100vh

Add in your Vue project

npm i vue-100vh

The default behavior

<template>
  <vue100vh :css="{height: '100rvh';}">
    <marquee>Your stuff goes here</marquee>
  </vue100vh>
</template>

<script>
import vue100vh from 'vue-100vh'

export default {
  components: { vue100vh },
}
</script>

Using rvh units

  <vue100vh :style="{ minHeight: '50rvh' }">
    <marquee>This is inside a div that takes at least 50% of viewport height.</marquee>
  </vue100vh>