fix: fix vue add router command in v3 projects (#4698)

fixes #4692

Author: haoqunjiang

packages/@vue/cli-ui/ui-defaults/suggestions.js

@@ -1,4 +1,7 @@
+const semver = require('semver')
+const { loadModule } = require('@vue/cli-shared-utils')
 const invoke = require('@vue/cli/lib/invoke')
+const add = require('@vue/cli/lib/add')
 
 const ROUTER = 'org.vue.vue-router-add'
 const VUEX = 'org.vue.vuex-add'
@@ -77,7 +80,17 @@ async function install (api, id) {
   let error
 
   try {
-    await invoke(id, {}, context)
+    const servicePkg = loadModule('@vue/cli-service/package.json', context)
+    // @vue/cli-plugin-router is not compatible with @vue/cli-service v3,
+    // so we have to check for the version and call the right generator
+    if (semver.satisfies(servicePkg.version, '3.x')) {
+      await invoke.runGenerator(context, {
+        id: `core:${id}`,
+        apply: loadModule(`@vue/cli-service/generator/${id}`, context)
+      })
+    } else {
+      await add(id, {}, context)
+    }
   } catch (e) {
     error = e
   }

packages/@vue/cli/lib/add.js

@@ -1,6 +1,8 @@
 const chalk = require('chalk')
 const semver = require('semver')
 const invoke = require('./invoke')
+const inquirer = require('inquirer')
+const { loadModule } = require('@vue/cli-shared-utils')
 
 const PackageManager = require('./util/ProjectPackageManager')
 const {
@@ -16,6 +18,18 @@ async function add (pluginName, options = {}, context = process.cwd()) {
     return
   }
 
+  // for `vue add` command in 3.x projects
+  const servicePkg = loadModule('@vue/cli-service/package.json', context)
+  if (semver.satisfies(servicePkg.version, '3.x')) {
+    // special internal "plugins"
+    if (/^(@vue\/)?router$/.test(pluginName)) {
+      return addRouter(context)
+    }
+    if (/^(@vue\/)?vuex$/.test(pluginName)) {
+      return addVuex(context)
+    }
+  }
+
   const packageName = resolvePluginId(pluginName)
 
   log()
@@ -45,3 +59,23 @@ module.exports = (...args) => {
     }
   })
 }
+
+async function addRouter (context) {
+  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',
+    apply: loadModule('@vue/cli-service/generator/vuex', context)
+  })
+}