How can I use window size in Vue? (How do I detect the soft keyboard?)

To get the current window height of your browser as it changes, use this script:

new Vue({
  el: '#app',
  data() {
    return {
      windowHeight: window.innerHeight
    }
  },

  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize);
    })
  },

  beforeDestroy() { 
    window.removeEventListener('resize', this.onResize); 
  },

  methods: {  
    onResize() {
      this.windowHeight = window.innerHeight
    }
  }
});

How to display the information:

<div id="app">
 Current height: {{ windowHeight }}
</div>

VUE 3

In Vue 3, you can create a function that can return a reactive width and breakpoint name values. You can easily reuse the function across multiple components.

import { computed, onMounted, onUnmounted, ref } from "vue"

export default function () {
  let windowWidth = ref(window.innerWidth)

  const onWidthChange = () => windowWidth.value = window.innerWidth
  onMounted(() => window.addEventListener('resize', onWidthChange))
  onUnmounted(() => window.removeEventListener('resize', onWidthChange))
  
  const type = computed(() => {
    if (windowWidth.value < 550) return 'xs'
    if (windowWidth.value >= 550 && windowWidth.value < 1200) return 'md'
    if (windowWidth.value >= 1200) return 'lg'
    return null; // This is an unreachable line, simply to keep eslint happy.
  })

  const width = computed(() => windowWidth.value)

  return { width, type }
}

You can use this in the setup method of your vue 3 component as follows.

const { width, type } = useBreakpoints()

Quick tip: Even though document event listeners are the most optimized things in the planet, this is best used only once in an app for performance reasons. Make a tiny plugin and add the value to the Vue instance, just like Vuetify does. Or to be simpler, commit them to vuex and read from there.

For those already using Vuetify, you can just watch this.$vuetify.breakpoint.width or this.$vuetify.breakpoint.height for changes in the viewport's dimensions.

Vuetify breakpoint docs

The above answer didn't work for me. Instead, I used:

mounted() {
  window.addEventListener('resize', () => {
    this.windowHeight = window.innerHeight
  })
}