Skip to content
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,13 +87,14 @@ const sidebar = {
title: 'Migration to Vue 3',
collapsable: true,
children: [
'migration',
'migration/introduction',
'migration/global-api',
'migration/treeshaking',
'migration/v-model',
'migration/functional-components',
'migration/async-components',
'migration/custom-directives'
'migration/custom-directives',
'migration/keycode-modifiers'
]
},
{
Expand Down
10 changes: 9 additions & 1 deletion src/guide/migration.md → src/guide/migration/introduction.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Migration
# Introduction

> There's so much here! Does that mean 3.0 is completely different, I'll have to learn the basics all over again, and migrating will be practically impossible?

Expand Down Expand Up @@ -37,3 +37,11 @@ It depends on a few factors:
> If I upgrade to Vue 3, will I also have to upgrade Vuex and Vue Router?

[//]: # 'TODO: still need to see where this lands'

## Overview

### Deprecated

The following features are now deprecated from v2:

- **keyCode support as `v-on` modifiers.** For more information, [see in-depth explanation](/guides/migration/keycodes.html)
51 changes: 51 additions & 0 deletions src/guide/migration/keycode-modifiers.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# KeyCode Modifiers

## Overview

Here is a quick summary of what has changed:

- **BREAKING**: Using numbers, i.e. keyCodes, as `v-on` modifiers is no longer supported
- **BREAKING**: `config.keyCodes` is no longer supported

## Previous Syntax

In Vue 2, `keyCodes` were supported as a way to modify a `v-on` method.

```html
<!-- keyCode version -->
<input v-on:keyup.13="submit" />

<!-- alias version -->
<input v-on:keyup.enter="submit" />
```

In addition, you could define your own aliases via the global `config.keyCodes` option.

```js
Vue.config.keyCodes = {
f1: 112
}
```

```html
<!-- keyCode version -->
<input v-on:keyup.112="showHelpText" />

<!-- custom alias version -->
<input v-on:keyup.f1="showHelpText" />
```

## Current Syntax

Since [`KeyboardEvent.keyCode` has been deprecated](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode), it no longer makes sense for Vue 3 to continue supporting this as well. As a result, it is now recommended to use the kebab-case name for any key you want to use as a modifier.

```html
<!-- Vue 3 Key Modifier on v-on -->
<input v-on:keyup.delete="confirmDelete" />
```

As a result, this means that `config.keyCodes` is now also deprecated and will no longer be supported.

## How to Migrate

For those using `keyCode` in their codbase, we recommend converting them to their kebab-cased named equivalents.