feat: detect and compile Vue 3 projects

packages/@vue/cli-plugin-typescript/package.json

@@ -36,8 +36,14 @@
   },
   "peerDependencies": {
     "@vue/cli-service": "^3.0.0 || ^4.0.0-0",
+    "@vue/compiler-sfc": "^3.0.0-beta.14",
     "typescript": ">=2"
   },
+  "peerDependenciesMeta": {
+    "@vue/compiler-sfc": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/chai": "^4.2.11",
     "@types/jest": "^24.0.19",

packages/@vue/cli-service/lib/config/base.js

@@ -1,3 +1,5 @@
+const { semver, loadModule } = require('@vue/cli-shared-utils')
+
 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
     const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
@@ -51,12 +53,6 @@ module.exports = (api, options) => {
         .end()
       .alias
         .set('@', api.resolve('src'))
-        .set(
-          'vue$',
-          options.runtimeCompiler
-            ? 'vue/dist/vue.esm.js'
-            : 'vue/dist/vue.runtime.esm.js'
-        )
 
     webpackConfig.resolveLoader
       .plugin('pnp-loaders')
@@ -73,40 +69,76 @@ module.exports = (api, options) => {
     // js is handled by cli-plugin-babel ---------------------------------------
 
     // vue-loader --------------------------------------------------------------
-    const vueLoaderCacheIdentifier = {
-      'vue-loader': require('vue-loader/package.json').version
-    }
+    const vue = loadModule('vue', api.service.context)
+
+    if (semver.major(vue.version) === 2) {
+      // for Vue 2 projects
+      const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
+        'vue-loader': require('vue-loader/package.json').version,
+        '@vue/component-compiler-utils': require('@vue/component-compiler-utils/package.json').version,
+        'vue-template-compiler': require('vue-template-compiler/package.json').version
+      })
 
-    // The following 2 deps are sure to exist in Vue 2 projects.
-    // But once we switch to Vue 3, they're no longer mandatory.
-    // (In Vue 3 they are replaced by @vue/compiler-sfc)
-    // So wrap them in a try catch block.
-    try {
-      vueLoaderCacheIdentifier['@vue/component-compiler-utils'] =
-        require('@vue/component-compiler-utils/package.json').version
-      vueLoaderCacheIdentifier['vue-template-compiler'] =
-        require('vue-template-compiler/package.json').version
-    } catch (e) {}
-    const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', vueLoaderCacheIdentifier)
+      webpackConfig.resolve
+        .alias
+          .set(
+            'vue$',
+            options.runtimeCompiler
+              ? 'vue/dist/vue.esm.js'
+              : 'vue/dist/vue.runtime.esm.js'
+          )
+
+      webpackConfig.module
+        .rule('vue')
+          .test(/\.vue$/)
+          .use('cache-loader')
+            .loader(require.resolve('cache-loader'))
+            .options(vueLoaderCacheConfig)
+            .end()
+          .use('vue-loader')
+            .loader(require.resolve('vue-loader'))
+            .options(Object.assign({
+              compilerOptions: {
+                whitespace: 'condense'
+              }
+            }, vueLoaderCacheConfig))
+
+      webpackConfig
+        .plugin('vue-loader')
+          .use(require('vue-loader').VueLoaderPlugin)
+    } else if (semver.major(vue.version) === 3) {
+      // for Vue 3 projects
+      const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
+        'vue-loader': require('vue-loader-v16/package.json').version,
+        '@vue/compiler-sfc': require('@vue/compiler-sfc/package.json').version
+      })
 
-    webpackConfig.module
-      .rule('vue')
-        .test(/\.vue$/)
-        .use('cache-loader')
-          .loader(require.resolve('cache-loader'))
-          .options(vueLoaderCacheConfig)
+      webpackConfig.resolve
+        .alias
+          .set(
+            'vue$',
+            options.runtimeCompiler
+              ? 'vue/dist/vue.esm-bundler.js'
+              : '@vue/runtime-dom'
+          )
+
+      webpackConfig.module
+        .rule('vue')
+          .test(/\.vue$/)
+          .use('cache-loader')
+            .loader(require.resolve('cache-loader'))
+            .options(vueLoaderCacheConfig)
+            .end()
+          .use('vue-loader')
+            .loader(require.resolve('vue-loader'))
+            .options(vueLoaderCacheConfig)
+            .end()
           .end()
-        .use('vue-loader')
-          .loader(require.resolve('vue-loader'))
-          .options(Object.assign({
-            compilerOptions: {
-              whitespace: 'condense'
-            }
-          }, vueLoaderCacheConfig))
 
-    webpackConfig
-      .plugin('vue-loader')
-      .use(require('vue-loader/lib/plugin'))
+      webpackConfig
+        .plugin('vue-loader')
+          .use(require('vue-loader-v16').VueLoaderPlugin)
+    }
 
     // static assets -----------------------------------------------------------
 

packages/@vue/cli-service/package.json

@@ -69,6 +69,7 @@
     "thread-loader": "^2.1.3",
     "url-loader": "^2.2.0",
     "vue-loader": "^15.9.2",
+    "vue-loader-v16": "npm:vue-loader@^16.0.0-beta.3",
     "vue-style-loader": "^4.1.2",
     "webpack": "^4.0.0",
     "webpack-bundle-analyzer": "^3.8.0",
@@ -77,9 +78,13 @@
     "webpack-merge": "^4.2.2"
   },
   "peerDependencies": {
+    "@vue/compiler-sfc": "^3.0.0-beta.14",
     "vue-template-compiler": "^2.0.0"
   },
   "peerDependenciesMeta": {
+    "@vue/compiler-sfc": {
+      "optional": true
+    },
     "less-loader": {
       "optional": true
     },
@@ -100,6 +105,7 @@
     }
   },
   "devDependencies": {
+    "@vue/compiler-sfc": "^3.0.0-beta.14",
     "fibers": ">= 3.1.1 <5.0.0",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",