docs: vue-cli with ts, close #14

Author: antfu

README.md

@@ -88,7 +88,7 @@ And then use [`vue-tsc`](https://github.com/johnsoncodehk/volar) to do the type
 {
   "scripts": {
     "dev": "nuxt",
-    "build": "vue-tsc --noEmit && nuxt build",
+    "build": "vue-tsc --noEmit && nuxt build"
   }
 }
 ```
@@ -112,6 +112,40 @@ module.exports = {
 
 Example: [`examples/vue-cli`](./examples/vue-cli)
 
+###### TypeScript
+
+To use TypeScript with Vue CLI, install `@vue/cli-plugin-typescript` but disable the type check:
+
+```bash
+npm i -D @vue/cli-plugin-typescript vue-tsc
+```
+
+```ts
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      require('vue2-script-setup-transform/webpack-plugin').default(),
+    ],
+  },
+  chainWebpack(config) {
+    // disable type check and let `vue-tsc` handles it
+    config.plugins.delete('fork-ts-checker')
+  },
+}
+```
+
+And then use [`vue-tsc`](https://github.com/johnsoncodehk/volar) to do the type check at build time:
+
+```jsonc
+// package.json
+{
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build": "vue-tsc --noEmit && vue-cli-service build"
+  }
+}
+```
+
 <br></details>
 
 <details>

examples/vue-cli/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "vue-tsc --noEmit && vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -12,8 +12,11 @@
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "typescript": "~4.1.5",
     "vue-template-compiler": "^2.6.11",
+    "vue-tsc": "^0.3.0",
     "vue2-script-setup-transform": "workspace:*"
   }
 }

examples/vue-cli/src/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
 </script>
 

examples/vue-cli/src/components/HelloWorld.vue

@@ -8,8 +8,7 @@
     </p>
     <h3>Installed CLI Plugins</h3>
     <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
     </ul>
     <h3>Essential Links</h3>
     <ul>
@@ -30,7 +29,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 defineProps({
   msg: String,
 })

examples/vue-cli/src/main.js renamed to examples/vue-cli/src/main.ts

@@ -5,6 +5,6 @@ import App from './App.vue'
 Vue.config.productionTip = false
 Vue.use(VueCompostionAPI)
 
-const app = new Vue({ render: h => h(App) })
+const app = new Vue({ render: h => h(App as any) })
 
 app.$mount('#app')

examples/vue-cli/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

examples/vue-cli/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "vue2-script-setup-transform/types"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

examples/vue-cli/vue.config.js

@@ -11,4 +11,8 @@ module.exports = {
       ScriptSetup(),
     ],
   },
+  chainWebpack(config) {
+    // disable type check and let `vue-tsc` handles it
+    config.plugins.delete('fork-ts-checker')
+  },
 }

package.json

@@ -77,6 +77,7 @@
     "esno": "^0.9.1",
     "fast-glob": "^3.2.7",
     "jest": "^27.0.6",
+    "log-editor": "^0.1.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.0.5",
     "tsup": "^4.14.0",