Vue Modifier Keys

I hope that you won’t get too confused when I tell you that not only is there something called key modifiers in Vue.js, but there is also something called modifier keys. Modifier keys refer to keys such as control, shift, alt and the Windows or Command key on Mac. With modifier keys, we can trigger an event listener only when one of these keys are pressed. Modifier keys are not limited to being used in conjunction with keyboard events, as we will see in this post.

First, let’s use the keyup event on a text input as we did before, this time with the shift and enter modifiers.

<input type="text" v-on:keyup.shift.enter="myListener">

My simple event listener is only invoked if I press the Shift and Enter keys simultaneously, with the text input in focus.

In this example, we have once again chained multiple modifiers – in this case a modifier key (being the Shift key) and a key modifier (being the Enter key).

I mentioned that modifier keys can be used with mouse events as well. Let’s see this by adding a new button with a click event.

<button v-on:click="myButtonListener">Click Here</button>

new Vue({
	el: '#app',
	methods: {
		myListener: function() {
			alert("You pressed the Shift + Enter key!");
		},
		myButtonListener: function() {
			alert("You clicked the button!");
		}
	}
});

This just displays an alert every time we click the button, which is hardly any fun. If I use the shift modifier key, though, the event listener will only be executed if I click the button while simultaneously holding down the Shift key on my keyboard.

<button v-on:click.shift="myButtonListener">Click Here</button>

Let’s test it out! So if I click the button normally, nothing really happens, but if I do that while holding down the shift key, we now see the alert.

The last modifier key I want to mention, I one named meta. This modifier corresponds to the Command key on Mac keyboards and the Windows key otherwise. Replacing shift with meta on the button would then mean that I would have to press the Command key instead, since I am on a Mac.

<button v-on:click.meta="myButtonListener">Click Here</button>

While this works on a Mac, I haven’t tested it on Windows, but it should work. The reason I say “should,” is that when using these keys, there is always a risk that the operating system or browser has some built-in shortcut for certain key combinations. So if you do want to use the meta modifier key, then be sure to test it out and be aware of any possible collissions with other operating system or application level shortcuts.