feat(create-app): clearer vue-ts setup recommend (#1896) [skip ci]

Author: johnsoncodehk

packages/create-app/template-vue-ts/src/components/HelloWorld.vue

@@ -1,51 +1,58 @@
 <template>
   <h1>{{ msg }}</h1>
 
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
-  </p>
+  <label>
+    <input type="checkbox" v-model="useScriptSetup" /> Use
+    <code>&lt;script setup&gt;</code>
+  </label>
+  <label>
+    <input type="checkbox" v-model="useTsPlugin" /> Provide types for
+    <code>*.vue</code> imports
+  </label>
 
   <p>
     Recommended IDE setup:
     <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
     +
-    <a
-      href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
-      target="_blank"
-    >Vetur</a>
-    +
-    <a
-      href="https://marketplace.visualstudio.com/items?itemName=znck.vue-language-features"
-      target="_blank"
-    >Vue DX</a>
+    <template v-if="!useScriptSetup">
+      <a
+        href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
+        target="_blank"
+      >Vetur</a>
+      +
+      <a
+        href="https://marketplace.visualstudio.com/items?itemName=znck.vue-language-features"
+        target="_blank"
+      >Vue DX</a>
+    </template>
+    <template v-else>
+      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    </template>
   </p>
-  <p>
-    If using &lt;script setup&gt;: use
-    <a
-      href="https://github.com/johnsoncodehk/volar"
-      target="_blank"
-    >Volar</a> instead (and disable Vetur)
-  </p>
-  <p>
-    <b style="color:red">Make sure to use workspace version of TypeScript!!!</b>
-    <br />This leverages the
-    <code>@vuex/typescript-plugin-vue</code> to provide types for `*.vue` imports.
-    <br />1. Open
+  <p v-if="useTsPlugin">
+    tsconfig setup:
+    <br />1. Install and add
+    <code>@vuex/typescript-plugin-vue</code> to tsconfig plugins
+    <br />2. Delete shims-vue.d.ts
+    <br />3. Open
     <code>src/main.ts</code> in VSCode
-    <br />2. Open VSCode command input
-    <br />3. Search and run "Select TypeScript version" -> "Use workspace version"
+    <br />4. Open VSCode command input
+    <br />5. Search and run "Select TypeScript version" -> "Use workspace version"
   </p>
   <button @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
   </p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Docs</a> |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
 </template>
 
 <script lang="ts">
 import { ref, defineComponent } from 'vue'
-
 export default defineComponent({
   name: 'HelloWorld',
   props: {
@@ -56,7 +63,9 @@ export default defineComponent({
   },
   setup: () => {
     const count = ref(0)
-    return { count }
+    const useScriptSetup = ref(false);
+    const useTsPlugin = ref(false);
+    return { count, useScriptSetup, useTsPlugin }
   }
 })
 </script>
@@ -65,4 +74,16 @@ export default defineComponent({
 a {
   color: #42b983;
 }
-</style>
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>

packages/create-app/template-vue-ts/src/main.ts

@@ -1,6 +1,4 @@
 import { createApp } from 'vue'
-// TypeScript error? Run VSCode command
-// TypeScript: Select TypeScript version - > Use Workspace Version
 import App from './App.vue'
 
 createApp(App).mount('#app')

packages/create-app/template-vue-ts/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

packages/create-app/template-vue-ts/tsconfig.json

@@ -6,11 +6,10 @@
     "strict": true,
     "jsx": "preserve",
     "sourceMap": true,
-    "lib": ["esnext", "dom"],
-    "types": ["vite/client"],
-    "plugins": [{ "name": "@vuedx/typescript-plugin-vue" }],
     "resolveJsonModule": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }