docs (#153): add breaking features section in migration (#158)

* refactor (#153): move migration introduction into folder

* docs (#153): add keycodes deprecated section

* docs (#153): update keycode file naming and terminology

* docs: fix grammar

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>

* docs: improve display

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>

Author: bencodezen

src/.vuepress/config.js

@@ -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'
       ]
     },
     {

src/guide/migration.md renamed to src/guide/migration/introduction.md

@@ -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?
 
@@ -38,6 +38,8 @@ It depends on a few factors:
 
 [//]: # 'TODO: still need to see where this lands'
 
+## Overview
+
 ### New Features
 
 Some of the new features to keep an eye on in Vue 3 include:
@@ -47,3 +49,9 @@ Some of the new features to keep an eye on in Vue 3 include:
 - Fragments
 - [Emits Component Option](/guide/component-custom-events.html)
 - `createRenderer` API from `@vue/runtime-core` to create custom renderers
+
+### Breaking
+
+The following consists a list of breaking changes from v2:
+
+- **keyCode support as `v-on` modifiers.** For more information, [see in-depth explanation](/guides/migration/keycodes.html)

src/guide/migration/keycode-modifiers.md

@@ -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.