From b6f5c8f195c3f6f083352387638ad0ebf3c250f3 Mon Sep 17 00:00:00 2001
From: Pavan Kumar Sunkara <pavan.sss1991@gmail.com>
Date: Tue, 25 Jun 2019 00:20:20 +0200
Subject: [PATCH 1/7] refactor: move router to it's own plugin

---
 packages/@vue/cli-plugin-router/.npmignore    |  2 +
 packages/@vue/cli-plugin-router/README.md     |  9 +++
 .../generator}/index.js                       | 19 +-----
 .../generator/template/src/App.vue            | 65 +++++++++++++++++++
 .../generator}/template/src/router.js         |  0
 .../generator}/template/src/views/About.vue   |  0
 .../generator}/template/src/views/Home.vue    |  0
 packages/@vue/cli-plugin-router/index.js      |  1 +
 packages/@vue/cli-plugin-router/package.json  | 30 +++++++++
 packages/@vue/cli-plugin-router/prompts.js    | 13 ++++
 .../__tests__/tsPluginE2e.spec.js             |  2 +-
 .../generator/template/src/views/Home.vue     |  4 +-
 .../@vue/cli-service/__tests__/serve.spec.js  |  4 +-
 packages/@vue/cli-service/generator/index.js  |  4 --
 .../generator/template/src/App.vue            | 59 +----------------
 packages/@vue/cli-service/lib/PluginAPI.js    |  3 +-
 .../cli-ui/apollo-server/api/PluginApi.js     |  3 +-
 .../apollo-server/connectors/projects.js      |  3 -
 .../@vue/cli-ui/ui-defaults/suggestions.js    | 17 +++--
 packages/@vue/cli/lib/Generator.js            |  3 +-
 packages/@vue/cli/lib/add.js                  | 17 -----
 packages/@vue/cli/lib/options.js              |  3 -
 .../promptModules/__tests__/router.spec.js    |  8 ++-
 packages/@vue/cli/lib/promptModules/router.js |  5 +-
 packages/@vue/cli/lib/util/features.js        |  3 -
 .../@vue/cli/lib/util/inferRootOptions.js     |  5 --
 26 files changed, 151 insertions(+), 131 deletions(-)
 create mode 100644 packages/@vue/cli-plugin-router/.npmignore
 create mode 100644 packages/@vue/cli-plugin-router/README.md
 rename packages/@vue/{cli-service/generator/router => cli-plugin-router/generator}/index.js (60%)
 create mode 100644 packages/@vue/cli-plugin-router/generator/template/src/App.vue
 rename packages/@vue/{cli-service/generator/router => cli-plugin-router/generator}/template/src/router.js (100%)
 rename packages/@vue/{cli-service/generator/router => cli-plugin-router/generator}/template/src/views/About.vue (100%)
 rename packages/@vue/{cli-service/generator/router => cli-plugin-router/generator}/template/src/views/Home.vue (100%)
 create mode 100644 packages/@vue/cli-plugin-router/index.js
 create mode 100644 packages/@vue/cli-plugin-router/package.json
 create mode 100644 packages/@vue/cli-plugin-router/prompts.js

diff --git a/packages/@vue/cli-plugin-router/.npmignore b/packages/@vue/cli-plugin-router/.npmignore
new file mode 100644
index 0000000000..e0b178a189
--- /dev/null
+++ b/packages/@vue/cli-plugin-router/.npmignore
@@ -0,0 +1,2 @@
+__tests__
+__mocks__
diff --git a/packages/@vue/cli-plugin-router/README.md b/packages/@vue/cli-plugin-router/README.md
new file mode 100644
index 0000000000..05786ca865
--- /dev/null
+++ b/packages/@vue/cli-plugin-router/README.md
@@ -0,0 +1,9 @@
+# @vue/cli-plugin-router
+
+> router plugin for vue-cli
+
+## Installing in an Already Created Project
+
+``` sh
+vue add @vue/router
+```
diff --git a/packages/@vue/cli-service/generator/router/index.js b/packages/@vue/cli-plugin-router/generator/index.js
similarity index 60%
rename from packages/@vue/cli-service/generator/router/index.js
rename to packages/@vue/cli-plugin-router/generator/index.js
index 5fab3ccd8b..6f2db5321c 100644
--- a/packages/@vue/cli-service/generator/router/index.js
+++ b/packages/@vue/cli-plugin-router/generator/index.js
@@ -1,34 +1,19 @@
 module.exports = (api, options = {}) => {
   api.injectImports(api.entryFile, `import router from './router'`)
   api.injectRootOptions(api.entryFile, `router`)
+
   api.extendPackage({
     dependencies: {
       'vue-router': '^3.0.6'
     }
   })
+
   api.render('./template', {
     historyMode: options.routerHistoryMode,
     doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript')
   })
 
   if (api.invoking) {
-    api.postProcessFiles(files => {
-      const appFile = files[`src/App.vue`]
-      if (appFile) {
-        files[`src/App.vue`] = appFile.replace(/^<template>[^]+<\/script>/, `
-<template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
-  </div>
-</template>
-        `.trim())
-      }
-    })
-
     if (api.hasPlugin('typescript')) {
       /* eslint-disable-next-line node/no-extraneous-require */
       const convertFiles = require('@vue/cli-plugin-typescript/generator/convert')
diff --git a/packages/@vue/cli-plugin-router/generator/template/src/App.vue b/packages/@vue/cli-plugin-router/generator/template/src/App.vue
new file mode 100644
index 0000000000..9be781051f
--- /dev/null
+++ b/packages/@vue/cli-plugin-router/generator/template/src/App.vue
@@ -0,0 +1,65 @@
+---
+extend: '@vue/cli-service/generator/template/src/App.vue'
+replace:
+  - !!js/regexp /<template>[^]*?<\/template>/
+  - !!js/regexp /<script>[^]*?<\/script>/
+  - !!js/regexp /  margin-top[^]*?<\/style>/
+---
+
+<%# REPLACE %>
+<template>
+  <div id="app">
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div>
+    <router-view/>
+  </div>
+</template>
+<%# END_REPLACE %>
+
+<%# REPLACE %>
+<%# END_REPLACE %>
+
+<%# REPLACE %>
+}
+
+<%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
+  <%_ if (!rootOptions.cssPreprocessor) { _%>
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+  <%_ } else { _%>
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+  <%_ } _%>
+<%_ } else { _%>
+#nav
+  padding 30px
+  a
+    font-weight bold
+    color #2c3e50
+    &.router-link-exact-active
+      color #42b983
+<%_ } _%>
+</style>
+<%# END_REPLACE %>
diff --git a/packages/@vue/cli-service/generator/router/template/src/router.js b/packages/@vue/cli-plugin-router/generator/template/src/router.js
similarity index 100%
rename from packages/@vue/cli-service/generator/router/template/src/router.js
rename to packages/@vue/cli-plugin-router/generator/template/src/router.js
diff --git a/packages/@vue/cli-service/generator/router/template/src/views/About.vue b/packages/@vue/cli-plugin-router/generator/template/src/views/About.vue
similarity index 100%
rename from packages/@vue/cli-service/generator/router/template/src/views/About.vue
rename to packages/@vue/cli-plugin-router/generator/template/src/views/About.vue
diff --git a/packages/@vue/cli-service/generator/router/template/src/views/Home.vue b/packages/@vue/cli-plugin-router/generator/template/src/views/Home.vue
similarity index 100%
rename from packages/@vue/cli-service/generator/router/template/src/views/Home.vue
rename to packages/@vue/cli-plugin-router/generator/template/src/views/Home.vue
diff --git a/packages/@vue/cli-plugin-router/index.js b/packages/@vue/cli-plugin-router/index.js
new file mode 100644
index 0000000000..615dfd51d3
--- /dev/null
+++ b/packages/@vue/cli-plugin-router/index.js
@@ -0,0 +1 @@
+module.exports = (api, options = {}) => {}
diff --git a/packages/@vue/cli-plugin-router/package.json b/packages/@vue/cli-plugin-router/package.json
new file mode 100644
index 0000000000..6d0e447fde
--- /dev/null
+++ b/packages/@vue/cli-plugin-router/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@vue/cli-plugin-router",
+  "version": "4.0.0-alpha.1",
+  "description": "router plugin for vue-cli",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuejs/vue-cli.git",
+    "directory": "packages/@vue/cli-plugin-router"
+  },
+  "keywords": [
+    "vue",
+    "cli",
+    "router"
+  ],
+  "author": "Evan You",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vuejs/vue-cli/issues"
+  },
+  "homepage": "https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-router#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@vue/cli-shared-utils": "^4.0.0-alpha.1"
+  },
+  "devDependencies": {
+  }
+}
diff --git a/packages/@vue/cli-plugin-router/prompts.js b/packages/@vue/cli-plugin-router/prompts.js
new file mode 100644
index 0000000000..62b49fc346
--- /dev/null
+++ b/packages/@vue/cli-plugin-router/prompts.js
@@ -0,0 +1,13 @@
+// these prompts are used if the plugin is late-installed into an existing
+// project and invoked by `vue invoke`.
+
+const { chalk } = require('@vue/cli-shared-utils')
+
+module.exports = [
+  {
+    name: 'routerHistoryMode',
+    type: 'confirm',
+    message: `Use history mode for router? ${chalk.yellow(`(Requires proper server setup for index fallback in production)`)}`,
+    description: `By using the HTML5 History API, the URLs don't need the '#' character anymore.`
+  }
+]
diff --git a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginE2e.spec.js b/packages/@vue/cli-plugin-typescript/__tests__/tsPluginE2e.spec.js
index e205eba2ca..fcc2f74c89 100644
--- a/packages/@vue/cli-plugin-typescript/__tests__/tsPluginE2e.spec.js
+++ b/packages/@vue/cli-plugin-typescript/__tests__/tsPluginE2e.spec.js
@@ -8,8 +8,8 @@ const create = require('@vue/cli-test-utils/createTestProject')
 if (!process.env.APPVEYOR) {
   test('cypress', async () => {
     const project = await create('ts-e2e-cypress-router', {
-      router: true,
       plugins: {
+        '@vue/cli-plugin-router': {},
         '@vue/cli-plugin-typescript': {},
         '@vue/cli-plugin-e2e-cypress': {}
       }
diff --git a/packages/@vue/cli-plugin-typescript/generator/template/src/views/Home.vue b/packages/@vue/cli-plugin-typescript/generator/template/src/views/Home.vue
index dd0bf42bcf..adcb0b7c36 100644
--- a/packages/@vue/cli-plugin-typescript/generator/template/src/views/Home.vue
+++ b/packages/@vue/cli-plugin-typescript/generator/template/src/views/Home.vue
@@ -1,6 +1,6 @@
 ---
-extend: '@vue/cli-service/generator/router/template/src/views/Home.vue'
-when: 'rootOptions.router'
+extend: '@vue/cli-plugin-router/generator/template/src/views/Home.vue'
+when: "rootOptions.plugins && rootOptions.plugins['@vue/cli-plugin-router']"
 replace:
   - !!js/regexp /Welcome to Your Vue\.js App/
   - !!js/regexp /<script>[^]*?<\/script>/
diff --git a/packages/@vue/cli-service/__tests__/serve.spec.js b/packages/@vue/cli-service/__tests__/serve.spec.js
index 3ad1798c0d..bcb0269286 100644
--- a/packages/@vue/cli-service/__tests__/serve.spec.js
+++ b/packages/@vue/cli-service/__tests__/serve.spec.js
@@ -29,7 +29,9 @@ test('serve', async () => {
 
 test('serve with router', async () => {
   const project = await create('e2e-serve-router', Object.assign({}, defaultPreset, {
-    router: true
+    plugins: {
+      '@vue/cli-plugin-router': {}
+    }
   }))
 
   await serve(
diff --git a/packages/@vue/cli-service/generator/index.js b/packages/@vue/cli-service/generator/index.js
index aaca427b35..4bc3bcf8c1 100644
--- a/packages/@vue/cli-service/generator/index.js
+++ b/packages/@vue/cli-service/generator/index.js
@@ -25,10 +25,6 @@ module.exports = (api, options) => {
     ]
   })
 
-  if (options.router) {
-    require('./router')(api, options)
-  }
-
   if (options.vuex) {
     require('./vuex')(api, options)
   }
diff --git a/packages/@vue/cli-service/generator/template/src/App.vue b/packages/@vue/cli-service/generator/template/src/App.vue
index 9bc61b1443..314f333d07 100644
--- a/packages/@vue/cli-service/generator/template/src/App.vue
+++ b/packages/@vue/cli-service/generator/template/src/App.vue
@@ -1,4 +1,3 @@
-<%_ if (!rootOptions.router) { _%>
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
@@ -9,7 +8,7 @@
     <%_ } _%>
   </div>
 </template>
-  <%_ if (!rootOptions.bare) { _%>
+<%_ if (!rootOptions.bare) { _%>
 
 <script>
 import HelloWorld from './components/HelloWorld.vue'
@@ -21,21 +20,8 @@ export default {
   }
 }
 </script>
-  <%_ } _%>
-<%_ } else { _%>
-<template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
-  </div>
-</template>
-<%_ } _%>
-<%_ if (!rootOptions.bare) { _%>
-<%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
 
+<%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
 <style<%-
   rootOptions.cssPreprocessor
     ? ` lang="${
@@ -51,37 +37,8 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  <%_ if (!rootOptions.router) { _%>
   margin-top: 60px;
-  <%_ } _%>
-}
-<%_ if (rootOptions.router) { _%>
-  <%_ if (!rootOptions.cssPreprocessor) { _%>
-#nav {
-  padding: 30px;
 }
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
-  <%_ } else { _%>
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-  <%_ } _%>
-<%_ } _%>
 </style>
 <%_ } else { _%>
 <style lang="stylus">
@@ -91,19 +48,7 @@ export default {
   -moz-osx-font-smoothing grayscale
   text-align center
   color #2c3e50
-  <%_ if (!rootOptions.router) { _%>
   margin-top 60px
-  <%_ } _%>
-<%_ if (rootOptions.router) { _%>
-
-#nav
-  padding 30px
-  a
-    font-weight bold
-    color #2c3e50
-    &.router-link-exact-active
-      color #42b983
-<%_ } _%>
 </style>
 <%_ } _%>
 <%_ } _%>
diff --git a/packages/@vue/cli-service/lib/PluginAPI.js b/packages/@vue/cli-service/lib/PluginAPI.js
index d3672d4ed1..39ebe76c28 100644
--- a/packages/@vue/cli-service/lib/PluginAPI.js
+++ b/packages/@vue/cli-service/lib/PluginAPI.js
@@ -64,8 +64,7 @@ class PluginAPI {
    * @return {boolean}
    */
   hasPlugin (id) {
-    if (id === 'router') id = 'vue-router'
-    if (['vue-router', 'vuex'].includes(id)) {
+    if (['vuex'].includes(id)) {
       const pkg = this.service.pkg
       return ((pkg.dependencies && pkg.dependencies[id]) || (pkg.devDependencies && pkg.devDependencies[id]))
     }
diff --git a/packages/@vue/cli-ui/apollo-server/api/PluginApi.js b/packages/@vue/cli-ui/apollo-server/api/PluginApi.js
index 4c26ff6c86..e5ecbf2044 100644
--- a/packages/@vue/cli-ui/apollo-server/api/PluginApi.js
+++ b/packages/@vue/cli-ui/apollo-server/api/PluginApi.js
@@ -397,8 +397,7 @@ class PluginApi {
    * @param {string} id Plugin id or short id
    */
   hasPlugin (id) {
-    if (id === 'router') id = 'vue-router'
-    if (['vue-router', 'vuex'].includes(id)) {
+    if (['vuex'].includes(id)) {
       const pkg = folders.readPackage(this.cwd, this.context, true)
       return ((pkg.dependencies && pkg.dependencies[id]) || (pkg.devDependencies && pkg.devDependencies[id]))
     }
diff --git a/packages/@vue/cli-ui/apollo-server/connectors/projects.js b/packages/@vue/cli-ui/apollo-server/connectors/projects.js
index 5ed8b02c9c..04a21fcae6 100644
--- a/packages/@vue/cli-ui/apollo-server/connectors/projects.js
+++ b/packages/@vue/cli-ui/apollo-server/connectors/projects.js
@@ -230,9 +230,6 @@ async function applyPreset (id, context) {
       )
     }
     if (preset.raw) {
-      if (preset.raw.router) {
-        await setFeatureEnabled({ id: 'router', enabled: true, updatePrompts: false }, context)
-      }
       if (preset.raw.vuex) {
         await setFeatureEnabled({ id: 'vuex', enabled: true, updatePrompts: false }, context)
       }
diff --git a/packages/@vue/cli-ui/ui-defaults/suggestions.js b/packages/@vue/cli-ui/ui-defaults/suggestions.js
index 8378ec3449..ae27af4081 100644
--- a/packages/@vue/cli-ui/ui-defaults/suggestions.js
+++ b/packages/@vue/cli-ui/ui-defaults/suggestions.js
@@ -8,7 +8,7 @@ const VUE_CONFIG_OPEN = 'org.vue.vue-config-open'
 module.exports = api => {
   api.onViewOpen(({ view }) => {
     if (view.id === 'vue-project-plugins') {
-      if (!api.hasPlugin('vue-router')) {
+      if (!api.hasPlugin('router')) {
         api.addSuggestion({
           id: ROUTER,
           type: 'action',
@@ -16,7 +16,7 @@ module.exports = api => {
           message: 'org.vue.cli-service.suggestions.vue-router-add.message',
           link: 'https://router.vuejs.org/',
           async handler () {
-            await install(api, 'vue-router')
+            await install(api, 'router')
           }
         })
       }
@@ -73,16 +73,19 @@ async function install (api, id) {
     progress: -1
   })
 
-  const name = id === 'vue-router' ? 'router' : id
   const context = api.getCwd()
 
   let error
 
   try {
-    await invoke.runGenerator(context, {
-      id: `core:${name}`,
-      apply: loadModule(`@vue/cli-service/generator/${name}`, context)
-    })
+    if (id === 'router') {
+      await invoke(id, {}, context)
+    } else {
+      await invoke.runGenerator(context, {
+        id: `core:${id}`,
+        apply: loadModule(`@vue/cli-service/generator/${id}`, context)
+      })
+    }
   } catch (e) {
     error = e
   }
diff --git a/packages/@vue/cli/lib/Generator.js b/packages/@vue/cli/lib/Generator.js
index 87386bea07..ecd826a87e 100644
--- a/packages/@vue/cli/lib/Generator.js
+++ b/packages/@vue/cli/lib/Generator.js
@@ -243,8 +243,7 @@ module.exports = class Generator {
   }
 
   hasPlugin (_id) {
-    if (_id === 'router') _id = 'vue-router'
-    if (['vue-router', 'vuex'].includes(_id)) {
+    if (['vuex'].includes(_id)) {
       const pkg = this.pkg
       return ((pkg.dependencies && pkg.dependencies[_id]) || (pkg.devDependencies && pkg.devDependencies[_id]))
     }
diff --git a/packages/@vue/cli/lib/add.js b/packages/@vue/cli/lib/add.js
index 848a843cd2..4d8b147921 100644
--- a/packages/@vue/cli/lib/add.js
+++ b/packages/@vue/cli/lib/add.js
@@ -14,9 +14,6 @@ const {
 
 async function add (pluginName, options = {}, context = process.cwd()) {
   // special internal "plugins"
-  if (/^(@vue\/)?router$/.test(pluginName)) {
-    return addRouter(context)
-  }
   if (/^(@vue\/)?vuex$/.test(pluginName)) {
     return addVuex(context)
   }
@@ -41,20 +38,6 @@ async function add (pluginName, options = {}, context = process.cwd()) {
   }
 }
 
-async function addRouter (context) {
-  const inquirer = require('inquirer')
-  const options = await inquirer.prompt([{
-    name: 'routerHistoryMode',
-    type: 'confirm',
-    message: `Use history mode for router? ${chalk.yellow(`(Requires proper server setup for index fallback in production)`)}`
-  }])
-  invoke.runGenerator(context, {
-    id: 'core:router',
-    apply: loadModule('@vue/cli-service/generator/router', context),
-    options
-  })
-}
-
 async function addVuex (context) {
   invoke.runGenerator(context, {
     id: 'core:vuex',
diff --git a/packages/@vue/cli/lib/options.js b/packages/@vue/cli/lib/options.js
index 197414cde1..72790902be 100644
--- a/packages/@vue/cli/lib/options.js
+++ b/packages/@vue/cli/lib/options.js
@@ -10,8 +10,6 @@ const rcPath = exports.rcPath = getRcPath('.vuerc')
 const presetSchema = createSchema(joi => joi.object().keys({
   bare: joi.boolean(),
   useConfigFiles: joi.boolean(),
-  router: joi.boolean(),
-  routerHistoryMode: joi.boolean(),
   vuex: joi.boolean(),
   cssPreprocessor: joi.string().only(['sass', 'dart-sass', 'node-sass', 'less', 'stylus']),
   plugins: joi.object().required(),
@@ -31,7 +29,6 @@ exports.validatePreset = preset => validate(preset, presetSchema, msg => {
 })
 
 exports.defaultPreset = {
-  router: false,
   vuex: false,
   useConfigFiles: false,
   cssPreprocessor: undefined,
diff --git a/packages/@vue/cli/lib/promptModules/__tests__/router.spec.js b/packages/@vue/cli/lib/promptModules/__tests__/router.spec.js
index 932ebafafa..30acccd304 100644
--- a/packages/@vue/cli/lib/promptModules/__tests__/router.spec.js
+++ b/packages/@vue/cli/lib/promptModules/__tests__/router.spec.js
@@ -19,9 +19,11 @@ test('router', async () => {
   ]
 
   const expectedOptions = {
-    router: true,
-    routerHistoryMode: true,
-    plugins: {}
+    plugins: {
+      '@vue/cli-plugin-router': {
+        routerHistoryMode: true
+      }
+    }
   }
 
   await assertPromptModule(
diff --git a/packages/@vue/cli/lib/promptModules/router.js b/packages/@vue/cli/lib/promptModules/router.js
index f64b6ec4f6..33a365fdd5 100644
--- a/packages/@vue/cli/lib/promptModules/router.js
+++ b/packages/@vue/cli/lib/promptModules/router.js
@@ -19,8 +19,9 @@ module.exports = cli => {
 
   cli.onPromptComplete((answers, options) => {
     if (answers.features.includes('router')) {
-      options.router = true
-      options.routerHistoryMode = answers.routerHistoryMode
+      options.plugins['@vue/cli-plugin-router'] = {
+        routerHistoryMode: answers.routerHistoryMode
+      }
     }
   })
 }
diff --git a/packages/@vue/cli/lib/util/features.js b/packages/@vue/cli/lib/util/features.js
index e64e69df04..f5ccc373ca 100644
--- a/packages/@vue/cli/lib/util/features.js
+++ b/packages/@vue/cli/lib/util/features.js
@@ -3,9 +3,6 @@ const { toShortPluginId } = require('@vue/cli-shared-utils')
 
 exports.getFeatures = (preset) => {
   const features = []
-  if (preset.router) {
-    features.push('vue-router')
-  }
   if (preset.vuex) {
     features.push('vuex')
   }
diff --git a/packages/@vue/cli/lib/util/inferRootOptions.js b/packages/@vue/cli/lib/util/inferRootOptions.js
index 2cbaca9608..6479e91be5 100644
--- a/packages/@vue/cli/lib/util/inferRootOptions.js
+++ b/packages/@vue/cli/lib/util/inferRootOptions.js
@@ -8,11 +8,6 @@ module.exports = function inferRootOptions (pkg) {
   // projectName
   rootOptions.projectName = pkg.name
 
-  // router
-  if ('vue-router' in deps) {
-    rootOptions.router = true
-  }
-
   // vuex
   if ('vuex' in deps) {
     rootOptions.vuex = true

From 31427bca60cbb91f62bcd4aac3c9ecc9fdfeb924 Mon Sep 17 00:00:00 2001
From: Pavan Kumar Sunkara <pavan.sss1991@gmail.com>
Date: Tue, 25 Jun 2019 00:36:37 +0200
Subject: [PATCH 2/7] refactor: rename routerHistoryMode option to historyMode

---
 packages/@vue/cli-plugin-router/generator/index.js           | 2 +-
 packages/@vue/cli-plugin-router/prompts.js                   | 2 +-
 packages/@vue/cli/lib/promptModules/__tests__/router.spec.js | 2 +-
 packages/@vue/cli/lib/promptModules/router.js                | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/@vue/cli-plugin-router/generator/index.js b/packages/@vue/cli-plugin-router/generator/index.js
index 6f2db5321c..89b3eb5c84 100644
--- a/packages/@vue/cli-plugin-router/generator/index.js
+++ b/packages/@vue/cli-plugin-router/generator/index.js
@@ -9,7 +9,7 @@ module.exports = (api, options = {}) => {
   })
 
   api.render('./template', {
-    historyMode: options.routerHistoryMode,
+    historyMode: options.historyMode,
     doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript')
   })
 
diff --git a/packages/@vue/cli-plugin-router/prompts.js b/packages/@vue/cli-plugin-router/prompts.js
index 62b49fc346..af10a49ae8 100644
--- a/packages/@vue/cli-plugin-router/prompts.js
+++ b/packages/@vue/cli-plugin-router/prompts.js
@@ -5,7 +5,7 @@ const { chalk } = require('@vue/cli-shared-utils')
 
 module.exports = [
   {
-    name: 'routerHistoryMode',
+    name: 'historyMode',
     type: 'confirm',
     message: `Use history mode for router? ${chalk.yellow(`(Requires proper server setup for index fallback in production)`)}`,
     description: `By using the HTML5 History API, the URLs don't need the '#' character anymore.`
diff --git a/packages/@vue/cli/lib/promptModules/__tests__/router.spec.js b/packages/@vue/cli/lib/promptModules/__tests__/router.spec.js
index 30acccd304..9f9918177f 100644
--- a/packages/@vue/cli/lib/promptModules/__tests__/router.spec.js
+++ b/packages/@vue/cli/lib/promptModules/__tests__/router.spec.js
@@ -21,7 +21,7 @@ test('router', async () => {
   const expectedOptions = {
     plugins: {
       '@vue/cli-plugin-router': {
-        routerHistoryMode: true
+        historyMode: true
       }
     }
   }
diff --git a/packages/@vue/cli/lib/promptModules/router.js b/packages/@vue/cli/lib/promptModules/router.js
index 33a365fdd5..2cdc1d239c 100644
--- a/packages/@vue/cli/lib/promptModules/router.js
+++ b/packages/@vue/cli/lib/promptModules/router.js
@@ -9,7 +9,7 @@ module.exports = cli => {
   })
 
   cli.injectPrompt({
-    name: 'routerHistoryMode',
+    name: 'historyMode',
     when: answers => answers.features.includes('router'),
     type: 'confirm',
     message: `Use history mode for router? ${chalk.yellow(`(Requires proper server setup for index fallback in production)`)}`,
@@ -20,7 +20,7 @@ module.exports = cli => {
   cli.onPromptComplete((answers, options) => {
     if (answers.features.includes('router')) {
       options.plugins['@vue/cli-plugin-router'] = {
-        routerHistoryMode: answers.routerHistoryMode
+        historyMode: answers.historyMode
       }
     }
   })

From fc2c31ec1228a701e90d40000de0cdb04d31b9a0 Mon Sep 17 00:00:00 2001
From: Pavan Kumar Sunkara <pavan.sss1991@gmail.com>
Date: Tue, 25 Jun 2019 09:30:46 +0200
Subject: [PATCH 3/7] test: add @vue/cli-plugin-router tests

---
 .../__tests__/routerGenerator.spec.js         | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js

diff --git a/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js b/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
new file mode 100644
index 0000000000..7cf54b369b
--- /dev/null
+++ b/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
@@ -0,0 +1,65 @@
+const generateWithPlugin = require('@vue/cli-test-utils/generateWithPlugin')
+// const create = require('@vue/cli-test-utils/createTestProject')
+
+test('base', async () => {
+  const { files, pkg } = await generateWithPlugin({
+    id: 'router',
+    apply: require('../generator'),
+    options: {}
+  })
+
+  expect(files['src/router.js']).toBeTruthy()
+  expect(files['src/router.js']).not.toMatch('history')
+  expect(files['src/views/About.vue']).toBeTruthy()
+  expect(files['src/views/Home.vue']).toBeTruthy()
+  expect(files['src/App.vue']).toMatch('<router-link to="/">Home</router-link>')
+  expect(files['src/App.vue']).not.toMatch('<script>')
+  expect(files['src/App.vue']).toMatch('#nav a.router-link-exact-active')
+
+  expect(pkg.dependencies).toHaveProperty('vue-router')
+})
+
+test('history mode', async () => {
+  const { files, pkg } = await generateWithPlugin({
+    id: 'router',
+    apply: require('../generator'),
+    options: {
+      historyMode: true
+    }
+  })
+
+  expect(files['src/router.js']).toBeTruthy()
+  expect(files['src/router.js']).toMatch('history')
+  expect(files['src/views/About.vue']).toBeTruthy()
+  expect(files['src/views/Home.vue']).toBeTruthy()
+  expect(files['src/App.vue']).toMatch('<router-link to="/">Home</router-link>')
+  expect(files['src/App.vue']).not.toMatch('<script>')
+  expect(files['src/App.vue']).toMatch('#nav a.router-link-exact-active')
+
+  expect(pkg.dependencies).toHaveProperty('vue-router')
+})
+
+test('use with Babel', async () => {
+  const { pkg, files } = await generateWithPlugin([
+    {
+      id: 'babel',
+      apply: require('@vue/cli-plugin-babel/generator'),
+      options: {}
+    },
+    {
+      id: 'router',
+      apply: require('../generator'),
+      options: {}
+    }
+  ])
+
+  expect(files['src/router.js']).toBeTruthy()
+  expect(files['src/router.js']).toMatch('component: () => import')
+  expect(files['src/views/About.vue']).toBeTruthy()
+  expect(files['src/views/Home.vue']).toBeTruthy()
+  expect(files['src/App.vue']).toMatch('<router-link to="/">Home</router-link>')
+  expect(files['src/App.vue']).not.toMatch('<script>')
+  expect(files['src/App.vue']).toMatch('#nav a.router-link-exact-active')
+
+  expect(pkg.dependencies).toHaveProperty('vue-router')
+})

From 3cc5e04f4f69b7ba3a1de72f9bb554d51ff09254 Mon Sep 17 00:00:00 2001
From: Pavan Kumar Sunkara <pavan.sss1991@gmail.com>
Date: Tue, 25 Jun 2019 09:41:08 +0200
Subject: [PATCH 4/7] feat: change src/router.js for most common use cases

---
 .../__tests__/routerGenerator.spec.js         | 12 +++---
 .../generator/template/src/router.js          | 33 -----------------
 .../generator/template/src/router/index.js    | 37 +++++++++++++++++++
 3 files changed, 43 insertions(+), 39 deletions(-)
 delete mode 100644 packages/@vue/cli-plugin-router/generator/template/src/router.js
 create mode 100644 packages/@vue/cli-plugin-router/generator/template/src/router/index.js

diff --git a/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js b/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
index 7cf54b369b..77030653ca 100644
--- a/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
+++ b/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
@@ -8,8 +8,8 @@ test('base', async () => {
     options: {}
   })
 
-  expect(files['src/router.js']).toBeTruthy()
-  expect(files['src/router.js']).not.toMatch('history')
+  expect(files['src/router/index.js']).toBeTruthy()
+  expect(files['src/router/index.js']).not.toMatch('history')
   expect(files['src/views/About.vue']).toBeTruthy()
   expect(files['src/views/Home.vue']).toBeTruthy()
   expect(files['src/App.vue']).toMatch('<router-link to="/">Home</router-link>')
@@ -28,8 +28,8 @@ test('history mode', async () => {
     }
   })
 
-  expect(files['src/router.js']).toBeTruthy()
-  expect(files['src/router.js']).toMatch('history')
+  expect(files['src/router/index.js']).toBeTruthy()
+  expect(files['src/router/index.js']).toMatch('history')
   expect(files['src/views/About.vue']).toBeTruthy()
   expect(files['src/views/Home.vue']).toBeTruthy()
   expect(files['src/App.vue']).toMatch('<router-link to="/">Home</router-link>')
@@ -53,8 +53,8 @@ test('use with Babel', async () => {
     }
   ])
 
-  expect(files['src/router.js']).toBeTruthy()
-  expect(files['src/router.js']).toMatch('component: () => import')
+  expect(files['src/router/index.js']).toBeTruthy()
+  expect(files['src/router/index.js']).toMatch('component: () => import')
   expect(files['src/views/About.vue']).toBeTruthy()
   expect(files['src/views/Home.vue']).toBeTruthy()
   expect(files['src/App.vue']).toMatch('<router-link to="/">Home</router-link>')
diff --git a/packages/@vue/cli-plugin-router/generator/template/src/router.js b/packages/@vue/cli-plugin-router/generator/template/src/router.js
deleted file mode 100644
index 967e7b66fc..0000000000
--- a/packages/@vue/cli-plugin-router/generator/template/src/router.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Home from './views/Home.vue'
-
-Vue.use(Router)
-
-export default new Router({
-  <%_ if (historyMode) { _%>
-  mode: 'history',
-  base: process.env.BASE_URL,
-  <%_ } _%>
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: Home
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      <%_ if (doesCompile) { _%>
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
-      <%_ } else { _%>
-      component: function () { 
-        return import(/* webpackChunkName: "about" */ './views/About.vue')
-      }
-      <%_ } _%>
-    }
-  ]
-})
diff --git a/packages/@vue/cli-plugin-router/generator/template/src/router/index.js b/packages/@vue/cli-plugin-router/generator/template/src/router/index.js
new file mode 100644
index 0000000000..8a74fbc1fe
--- /dev/null
+++ b/packages/@vue/cli-plugin-router/generator/template/src/router/index.js
@@ -0,0 +1,37 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'about',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    <%_ if (doesCompile) { _%>
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    <%_ } else { _%>
+    component: function () {
+      return import(/* webpackChunkName: "about" */ '../views/About.vue')
+    }
+    <%_ } _%>
+  }
+]
+
+const router = new VueRouter({
+  <%_ if (historyMode) { _%>
+  mode: 'history',
+  base: process.env.BASE_URL,
+  <%_ } _%>
+  routes
+})
+
+export default router

From 7303320137e410e5259e71209b09357d2329b7ff Mon Sep 17 00:00:00 2001
From: Pavan Kumar Sunkara <pavan.sss1991@gmail.com>
Date: Tue, 25 Jun 2019 10:39:01 +0200
Subject: [PATCH 5/7] fix: fix cli-ui tests

---
 packages/@vue/cli-ui/tests/e2e/specs/g2-plugins.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@vue/cli-ui/tests/e2e/specs/g2-plugins.js b/packages/@vue/cli-ui/tests/e2e/specs/g2-plugins.js
index ad36b135b2..8bd290edcf 100644
--- a/packages/@vue/cli-ui/tests/e2e/specs/g2-plugins.js
+++ b/packages/@vue/cli-ui/tests/e2e/specs/g2-plugins.js
@@ -1,7 +1,7 @@
 describe('Plugins', () => {
   it('Should display the plugins', () => {
     cy.visit('/plugins')
-    cy.get('.project-plugin-item').should('have.length', 4)
+    cy.get('.project-plugin-item').should('have.length', 5)
   })
 
   it('Should add a plugin', () => {
@@ -26,6 +26,6 @@ describe('Plugins', () => {
       .should('be.visible')
       .should('not.have.class', 'disabled')
       .click()
-    cy.get('.project-plugin-item').should('have.length', 4)
+    cy.get('.project-plugin-item').should('have.length', 5)
   })
 })

From 1245426cbef6052c49def5fd18acef8ed7161c1e Mon Sep 17 00:00:00 2001
From: Pavan Kumar Sunkara <pavan.sss1991@gmail.com>
Date: Tue, 25 Jun 2019 20:05:05 +0200
Subject: [PATCH 6/7] docs: Remove router root option from docs

---
 docs/dev-guide/ui-api.md             |  4 ++--
 docs/guide/plugins-and-presets.md    | 11 ++---------
 docs/ru/dev-guide/ui-api.md          |  4 ++--
 docs/ru/guide/plugins-and-presets.md | 11 ++---------
 docs/zh/guide/plugins-and-presets.md | 11 ++---------
 5 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/docs/dev-guide/ui-api.md b/docs/dev-guide/ui-api.md
index 4ee32902fe..a742100d9e 100644
--- a/docs/dev-guide/ui-api.md
+++ b/docs/dev-guide/ui-api.md
@@ -1274,7 +1274,7 @@ const ROUTER = 'vue-router-add'
 
 api.onViewOpen(({ view }) => {
   if (view.id === 'vue-project-plugins') {
-    if (!api.hasPlugin('vue-router')) {
+    if (!api.hasPlugin('router')) {
       api.addSuggestion({
         id: ROUTER,
         type: 'action',
@@ -1282,7 +1282,7 @@ api.onViewOpen(({ view }) => {
         message: 'org.vue.cli-service.suggestions.vue-router-add.message',
         link: 'https://router.vuejs.org/',
         async handler () {
-          await install(api, 'vue-router')
+          await install(api, 'router')
         }
       })
     }
diff --git a/docs/guide/plugins-and-presets.md b/docs/guide/plugins-and-presets.md
index 0ebee9f122..ae0de69711 100644
--- a/docs/guide/plugins-and-presets.md
+++ b/docs/guide/plugins-and-presets.md
@@ -52,13 +52,6 @@ You can pass generator options to the installed plugin (this will skip the promp
 vue add @vue/eslint --config airbnb --lintOn save
 ```
 
-`vue-router` and `vuex` are special cases - they do not have their own plugins, but you can add them nonetheless:
-
-``` bash
-vue add router
-vue add vuex
-```
-
 If a plugin is already installed, you can skip the installation and only invoke its generator with the `vue invoke` command. The command takes the same arguments as `vue add`.
 
 ::: tip
@@ -112,7 +105,6 @@ Here's an example preset:
 ``` json
 {
   "useConfigFiles": true,
-  "router": true,
   "vuex": true,
   "cssPreprocessor": "sass",
   "plugins": {
@@ -120,7 +112,8 @@ Here's an example preset:
     "@vue/cli-plugin-eslint": {
       "config": "airbnb",
       "lintOn": ["save", "commit"]
-    }
+    },
+    "@vue/cli-plugin-router": {}
   }
 }
 ```
diff --git a/docs/ru/dev-guide/ui-api.md b/docs/ru/dev-guide/ui-api.md
index 6560eb3c28..91d657e756 100644
--- a/docs/ru/dev-guide/ui-api.md
+++ b/docs/ru/dev-guide/ui-api.md
@@ -1274,7 +1274,7 @@ const ROUTER = 'vue-router-add'
 
 api.onViewOpen(({ view }) => {
   if (view.id === 'vue-project-plugins') {
-    if (!api.hasPlugin('vue-router')) {
+    if (!api.hasPlugin('router')) {
       api.addSuggestion({
         id: ROUTER,
         type: 'action',
@@ -1282,7 +1282,7 @@ api.onViewOpen(({ view }) => {
         message: 'org.vue.cli-service.suggestions.vue-router-add.message',
         link: 'https://router.vuejs.org/',
         async handler () {
-          await install(api, 'vue-router')
+          await install(api, 'router')
         }
       })
     }
diff --git a/docs/ru/guide/plugins-and-presets.md b/docs/ru/guide/plugins-and-presets.md
index 2233469f7a..7bd8b63618 100644
--- a/docs/ru/guide/plugins-and-presets.md
+++ b/docs/ru/guide/plugins-and-presets.md
@@ -52,13 +52,6 @@ vue add @foo/bar
 vue add @vue/eslint --config airbnb --lintOn save
 ```
 
-Добавление `vue-router` и `vuex` — особый случай, у них нет собственных плагинов, но вы тем не менее можете их добавить:
-
-``` bash
-vue add router
-vue add vuex
-```
-
 Если плагин уже установлен, вы можете пропустить установку и только вызвать его генератор с помощью команды `vue invoke`. Команда принимает такие же аргументы, как и `vue add`.
 
 ::: tip Совет
@@ -112,7 +105,6 @@ vue add vuex
 ``` json
 {
   "useConfigFiles": true,
-  "router": true,
   "vuex": true,
   "cssPreprocessor": "sass",
   "plugins": {
@@ -120,7 +112,8 @@ vue add vuex
     "@vue/cli-plugin-eslint": {
       "config": "airbnb",
       "lintOn": ["save", "commit"]
-    }
+    },
+    "@vue/cli-plugin-router": {}
   }
 }
 ```
diff --git a/docs/zh/guide/plugins-and-presets.md b/docs/zh/guide/plugins-and-presets.md
index 48b0edc0f7..db6b8754c5 100644
--- a/docs/zh/guide/plugins-and-presets.md
+++ b/docs/zh/guide/plugins-and-presets.md
@@ -52,13 +52,6 @@ vue add @foo/bar
 vue add @vue/eslint --config airbnb --lintOn save
 ```
 
-`vue-router` 和 `vuex` 的情况比较特殊——它们并没有自己的插件，但是你仍然可以这样添加它们：
-
-``` bash
-vue add router
-vue add vuex
-```
-
 如果一个插件已经被安装，你可以使用 `vue invoke` 命令跳过安装过程，只调用它的生成器。这个命令会接受和 `vue add` 相同的参数。
 
 ::: tip 提示
@@ -112,7 +105,6 @@ vue add vuex
 ``` json
 {
   "useConfigFiles": true,
-  "router": true,
   "vuex": true,
   "cssPreprocessor": "sass",
   "plugins": {
@@ -120,7 +112,8 @@ vue add vuex
     "@vue/cli-plugin-eslint": {
       "config": "airbnb",
       "lintOn": ["save", "commit"]
-    }
+    },
+    "@vue/cli-plugin-router": {}
   }
 }
 ```

From 613da0ae4915c4123dccfca224769221b2f6fc7f Mon Sep 17 00:00:00 2001
From: Pavan Kumar Sunkara <pavan.sss1991@gmail.com>
Date: Tue, 2 Jul 2019 16:10:50 +0200
Subject: [PATCH 7/7] fix: add support for legacy router option

---
 .../__tests__/routerGenerator.spec.js         |  1 -
 .../@vue/cli-plugin-router/generator/index.js |  3 +++
 .../generator/template/src/App.vue            |  2 +-
 packages/@vue/cli-plugin-router/package.json  |  5 ++--
 .../@vue/cli-service/__tests__/serve.spec.js  | 23 +++++++++++++++++++
 .../apollo-server/connectors/projects.js      |  3 +++
 packages/@vue/cli/lib/Creator.js              | 10 ++++++++
 packages/@vue/cli/lib/options.js              |  3 +++
 packages/@vue/cli/lib/util/features.js        |  3 +++
 .../@vue/cli/lib/util/inferRootOptions.js     |  5 ++++
 10 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js b/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
index 77030653ca..baac1337b6 100644
--- a/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
+++ b/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
@@ -1,5 +1,4 @@
 const generateWithPlugin = require('@vue/cli-test-utils/generateWithPlugin')
-// const create = require('@vue/cli-test-utils/createTestProject')
 
 test('base', async () => {
   const { files, pkg } = await generateWithPlugin({
diff --git a/packages/@vue/cli-plugin-router/generator/index.js b/packages/@vue/cli-plugin-router/generator/index.js
index 89b3eb5c84..db0403889c 100644
--- a/packages/@vue/cli-plugin-router/generator/index.js
+++ b/packages/@vue/cli-plugin-router/generator/index.js
@@ -1,4 +1,7 @@
 module.exports = (api, options = {}) => {
+  api.assertCliVersion('^4.0.0-alpha.3')
+  api.assertCliServiceVersion('^4.0.0-alpha.3')
+
   api.injectImports(api.entryFile, `import router from './router'`)
   api.injectRootOptions(api.entryFile, `router`)
 
diff --git a/packages/@vue/cli-plugin-router/generator/template/src/App.vue b/packages/@vue/cli-plugin-router/generator/template/src/App.vue
index 9be781051f..582a95833b 100644
--- a/packages/@vue/cli-plugin-router/generator/template/src/App.vue
+++ b/packages/@vue/cli-plugin-router/generator/template/src/App.vue
@@ -2,7 +2,7 @@
 extend: '@vue/cli-service/generator/template/src/App.vue'
 replace:
   - !!js/regexp /<template>[^]*?<\/template>/
-  - !!js/regexp /<script>[^]*?<\/script>/
+  - !!js/regexp /\n<script>[^]*?<\/script>\n/
   - !!js/regexp /  margin-top[^]*?<\/style>/
 ---
 
diff --git a/packages/@vue/cli-plugin-router/package.json b/packages/@vue/cli-plugin-router/package.json
index 6d0e447fde..8bce3b3328 100644
--- a/packages/@vue/cli-plugin-router/package.json
+++ b/packages/@vue/cli-plugin-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/cli-plugin-router",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.3",
   "description": "router plugin for vue-cli",
   "main": "index.js",
   "repository": {
@@ -23,8 +23,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@vue/cli-shared-utils": "^4.0.0-alpha.1"
+    "@vue/cli-shared-utils": "^4.0.0-alpha.3"
   },
   "devDependencies": {
+    "@vue/cli-test-utils": "^4.0.0-alpha.3"
   }
 }
diff --git a/packages/@vue/cli-service/__tests__/serve.spec.js b/packages/@vue/cli-service/__tests__/serve.spec.js
index bcb0269286..69dc584836 100644
--- a/packages/@vue/cli-service/__tests__/serve.spec.js
+++ b/packages/@vue/cli-service/__tests__/serve.spec.js
@@ -51,6 +51,29 @@ test('serve with router', async () => {
   )
 })
 
+test('serve with legacy router option', async () => {
+  const project = await create('e2e-serve-legacy-router', Object.assign({}, defaultPreset, {
+    router: true,
+    routerHistoryMode: true
+  }))
+
+  await serve(
+    () => project.run('vue-cli-service serve'),
+    async ({ page, helpers }) => {
+      expect(await helpers.getText('h1')).toMatch(`Welcome to Your Vue.js App`)
+      expect(await helpers.hasElement('#nav')).toBe(true)
+      expect(await helpers.hasClass('a[href="/"]', 'router-link-exact-active')).toBe(true)
+      expect(await helpers.hasClass('a[href="/about"]', 'router-link-exact-active')).toBe(false)
+
+      await page.click('a[href="/about"]')
+      expect(await helpers.getText('h1')).toMatch(`This is an about page`)
+      expect(await helpers.hasElement('#nav')).toBe(true)
+      expect(await helpers.hasClass('a[href="/"]', 'router-link-exact-active')).toBe(false)
+      expect(await helpers.hasClass('a[href="/about"]', 'router-link-exact-active')).toBe(true)
+    }
+  )
+})
+
 test('serve with inline entry', async () => {
   const project = await create('e2e-serve-inline-entry', defaultPreset)
 
diff --git a/packages/@vue/cli-ui/apollo-server/connectors/projects.js b/packages/@vue/cli-ui/apollo-server/connectors/projects.js
index 04a21fcae6..5ed8b02c9c 100644
--- a/packages/@vue/cli-ui/apollo-server/connectors/projects.js
+++ b/packages/@vue/cli-ui/apollo-server/connectors/projects.js
@@ -230,6 +230,9 @@ async function applyPreset (id, context) {
       )
     }
     if (preset.raw) {
+      if (preset.raw.router) {
+        await setFeatureEnabled({ id: 'router', enabled: true, updatePrompts: false }, context)
+      }
       if (preset.raw.vuex) {
         await setFeatureEnabled({ id: 'vuex', enabled: true, updatePrompts: false }, context)
       }
diff --git a/packages/@vue/cli/lib/Creator.js b/packages/@vue/cli/lib/Creator.js
index 7782b59cf6..e8db9c0774 100644
--- a/packages/@vue/cli/lib/Creator.js
+++ b/packages/@vue/cli/lib/Creator.js
@@ -92,10 +92,20 @@ module.exports = class Creator extends EventEmitter {
     preset.plugins['@vue/cli-service'] = Object.assign({
       projectName: name
     }, preset)
+
     if (cliOptions.bare) {
       preset.plugins['@vue/cli-service'].bare = true
     }
 
+    // legacy support for router
+    if (preset.router) {
+      preset.plugins['@vue/cli-plugin-router'] = {}
+
+      if (preset.routerHistoryMode) {
+        preset.plugins['@vue/cli-plugin-router'].historyMode = true
+      }
+    }
+
     const packageManager = (
       cliOptions.packageManager ||
       loadOptions().packageManager ||
diff --git a/packages/@vue/cli/lib/options.js b/packages/@vue/cli/lib/options.js
index 72790902be..e2f26e729a 100644
--- a/packages/@vue/cli/lib/options.js
+++ b/packages/@vue/cli/lib/options.js
@@ -10,6 +10,9 @@ const rcPath = exports.rcPath = getRcPath('.vuerc')
 const presetSchema = createSchema(joi => joi.object().keys({
   bare: joi.boolean(),
   useConfigFiles: joi.boolean(),
+  // TODO: Use warn for router once @hapi/joi v16 releases
+  router: joi.boolean(),
+  routerHistoryMode: joi.boolean(),
   vuex: joi.boolean(),
   cssPreprocessor: joi.string().only(['sass', 'dart-sass', 'node-sass', 'less', 'stylus']),
   plugins: joi.object().required(),
diff --git a/packages/@vue/cli/lib/util/features.js b/packages/@vue/cli/lib/util/features.js
index f5ccc373ca..916952ba01 100644
--- a/packages/@vue/cli/lib/util/features.js
+++ b/packages/@vue/cli/lib/util/features.js
@@ -3,6 +3,9 @@ const { toShortPluginId } = require('@vue/cli-shared-utils')
 
 exports.getFeatures = (preset) => {
   const features = []
+  if (preset.router) {
+    features.push('router')
+  }
   if (preset.vuex) {
     features.push('vuex')
   }
diff --git a/packages/@vue/cli/lib/util/inferRootOptions.js b/packages/@vue/cli/lib/util/inferRootOptions.js
index 6479e91be5..2cbaca9608 100644
--- a/packages/@vue/cli/lib/util/inferRootOptions.js
+++ b/packages/@vue/cli/lib/util/inferRootOptions.js
@@ -8,6 +8,11 @@ module.exports = function inferRootOptions (pkg) {
   // projectName
   rootOptions.projectName = pkg.name
 
+  // router
+  if ('vue-router' in deps) {
+    rootOptions.router = true
+  }
+
   // vuex
   if ('vuex' in deps) {
     rootOptions.vuex = true