Image

build-a-gmail-clone-with-vue-3

3 min read
Last update: December 19, 2021

Keyboard Shortcuts

For the starting code for this lesson, switch to branch: https://github.com/Code-Pop/build-gmail-clone-with-vue-3/tree/video-7-start

In this lesson, we’re going to make our Modal component easier to use by attaching a keyboard shortcut - if the user is in a modal and clicks the escape key, the modal closes down.

While creating this feature, we’re going to explore some hooks in the setup function, and take the first steps to some cool uses of the Composition API.

First, let’s set up a function to get keyboard events.

export default {
setup(props, {emit}){
let onKeydown = (event) => {
console.log('keydown', event.key);
}

window.addEventListener('keydown', onKeydown)

return {
emit
}
},
props: {...}
}

After opening the modal, start clicking keys and see that we’re logging them. Hit ‘escape’ and notice that it says ‘Escape’.

Next, we’ll define our onKeydown function so that it will emit the closeModal event if the key pressed was Escape.

import { onBeforeUnmount } from 'vue';

export default {
setup(props, {emit}){
let onKeydown = (event) => {
if(event.key == 'Escape') {
emit('closeModal')
}
}

window.addEventListener('keydown', onKeydown)

onBeforeUnmount(() => {
window.removeEventListener('keydown', onKeydown)
})
},
props: { ... }
}

Great! It works.

But there is an issue with our solution.

Close it down, and open it up again… and notice that it’s logging twice per key press. Then close it down, and notice it’s still logging twice per key press. That’s because we’re not removing the event listeners, so they stick around after closing the modal, and stack up every time we open the modal again.

Here’s the solution:

import { onBeforeUnmount } from 'vue';

export default {
setup(props, {emit}){
let onKeydown = (event) => {
if(event.key == 'Escape') {
emit('closeModal')
}
}

window.addEventListener('keydown', onKeydown)

onBeforeUnmount(() => {
window.removeEventListener('keydown', onKeydown)
})
},
prop: {...}
}

This hook will be called every time we unmount the modal, removing the event listener. If you want to know more about lifecycle hooks, check out this video in Vue Mastery’s Vue 3 Essentials course: https://www.vuemastery.com/courses/vue-3-essentials/lifecycle-hooks.

Fantastic.

We’ve got our functionality down. However, a casual reader of the code may not immediately understand what’s happening or how the different parts of the setup function are connected, especially if there’s other functionality sprinkled in there.

That’s why, in the next video, we’ll be abstracting that to a nice, easy-to-use and easy-to-read function, using the Composition API.

For the ending code for this lesson, switch to branch: https://github.com/Code-Pop/build-gmail-clone-with-vue-3/tree/video-7-end

Jeffrey teaches an 8-week beginning Vue course with guaranteed results. Built on top of the VueMastery curriculum, with extra hands-on assignments and personal attention. You can find it here.