feat(create-app): more detailed instructions for vue-ts template

vitejs · Feb 3, 2021 · 79dd32c · 79dd32c
1 parent cdab0a7
commit 79dd32c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/create-app/template-vue-ts/src/App.vue b/packages/create-app/template-vue-ts/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + Vite" />
+  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
 </template>
 
 <script lang="ts">

diff --git a/packages/create-app/template-vue-ts/src/components/HelloWorld.vue b/packages/create-app/template-vue-ts/src/components/HelloWorld.vue
@@ -7,7 +7,7 @@
   </p>
 
   <p>
-    Recommended setup:
+    Recommended IDE setup:
     <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
     +
     <a
@@ -21,12 +21,20 @@
     >Vue DX</a>
   </p>
   <p>
-    Make sure to use workspace version of TypeScript to get improved support via
+    If using &lt;script setup&gt;: use
     <a
-      href="https://github.com/znck/vue-developer-experience"
+      href="https://github.com/johnsoncodehk/volar"
       target="_blank"
-    >@vuedx</a>.
-    <br />Note @vuedx is still experimental and this setup is provided for early feedback.
+    >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
+    <code>src/main.ts</code> in VSCode
+    <br />2. Open VSCode command input
+    <br />3. Search and run "Select TypeScript version" -> "Use workspace version"
   </p>
   <button @click="count++">count is: {{ count }}</button>
   <p>