Add a keyboard listener in Vue

To add a keyboard listener in Vue, use the mounted() function.

Example:

vue
<template>
    <button @click = 'show'>Click or press Enter</button>
</template>

<script>


export default {
    mounted(){

        window.addEventListener('keyup', this.show)

    },
    methods: {
        show(e){

            if(e.key === 'Enter')
                alert('Enter pressed')
            
            if(!e.key)
                alert('Button clicked')

        }
    }

}
</script>

Additionally, you can use the unmounted() function to remove the listener:

javascript
unmounted(){

    window.removeEventListener('keyup', this.show)

}