diff --git a/packages/@vue/cli-plugin-typescript/index.js b/packages/@vue/cli-plugin-typescript/index.js index be65dff5b7..7d8de466d1 100644 --- a/packages/@vue/cli-plugin-typescript/index.js +++ b/packages/@vue/cli-plugin-typescript/index.js @@ -77,12 +77,24 @@ module.exports = (api, projectOptions) => { }) if (!process.env.VUE_CLI_TEST) { + // try to load `@vue/compiler-sfc` if the project is using Vue 3. + // if it is not available, it uses `vue-template-compiler` + let compiler = '@vue/compiler-sfc' + try { + require(compiler) + // use a shim as @vue/compiler-sfc does not offer the `parseComponent` function + // but a `parse` function + // the shim only delegates to the parse function + compiler = '@vue/cli-plugin-typescript/vue-compiler-sfc-shim' + } catch (e) { + compiler = 'vue-template-compiler' + } // this plugin does not play well with jest + cypress setup (tsPluginE2e.spec.js) somehow // so temporarily disabled for vue-cli tests config .plugin('fork-ts-checker') .use(require('fork-ts-checker-webpack-plugin'), [{ - vue: true, + vue: { enabled: true, compiler }, tslint: projectOptions.lintOnSave !== false && fs.existsSync(api.resolve('tslint.json')), formatter: 'codeframe', // https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse diff --git a/packages/@vue/cli-plugin-typescript/vue-compiler-sfc-shim.js b/packages/@vue/cli-plugin-typescript/vue-compiler-sfc-shim.js new file mode 100644 index 0000000000..c9be3dbc41 --- /dev/null +++ b/packages/@vue/cli-plugin-typescript/vue-compiler-sfc-shim.js @@ -0,0 +1,7 @@ +const compilerSFC = require('@vue/compiler-sfc') + +module.exports = { + parseComponent (content, options) { + return compilerSFC.parse(content, options) + } +}