fix: fix js HelloWorld template

diff --git a/playground/default/src/components/HelloWorld.vue b/playground/default/src/components/HelloWorld.vue
index 36a089f1ee821e775bfe63409402e2ce2be1e5af..51f81a8f83513e6f808e5994e1fcbe1fc6884c07 100644 (file)
--- a/playground/default/src/components/HelloWorld.vue
+++ b/playground/default/src/components/HelloWorld.vue
@@ -1,17 +1,24 @@
 <template>
   <h1>{{ msg }}</h1>
 
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
+      Vite Docs
     </a>
     |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="state.count++">
-    count is: {{ state.count }}
-  </button>
+  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -35,4 +42,16 @@ const count = ref(0)
 a {
   color: #42b983;
 }
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
 </style>

diff --git a/playground/jsx/src/components/HelloWorld.vue b/playground/jsx/src/components/HelloWorld.vue
index 36a089f1ee821e775bfe63409402e2ce2be1e5af..51f81a8f83513e6f808e5994e1fcbe1fc6884c07 100644 (file)
--- a/playground/jsx/src/components/HelloWorld.vue
+++ b/playground/jsx/src/components/HelloWorld.vue
@@ -1,17 +1,24 @@
 <template>
   <h1>{{ msg }}</h1>
 
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
+      Vite Docs
     </a>
     |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="state.count++">
-    count is: {{ state.count }}
-  </button>
+  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -35,4 +42,16 @@ const count = ref(0)
 a {
   color: #42b983;
 }
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
 </style>

diff --git a/playground/vuex-with-tests/src/components/HelloWorld.vue b/playground/vuex-with-tests/src/components/HelloWorld.vue
index 36a089f1ee821e775bfe63409402e2ce2be1e5af..51f81a8f83513e6f808e5994e1fcbe1fc6884c07 100644 (file)
--- a/playground/vuex-with-tests/src/components/HelloWorld.vue
+++ b/playground/vuex-with-tests/src/components/HelloWorld.vue
@@ -1,17 +1,24 @@
 <template>
   <h1>{{ msg }}</h1>
 
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
+      Vite Docs
     </a>
     |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="state.count++">
-    count is: {{ state.count }}
-  </button>
+  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -35,4 +42,16 @@ const count = ref(0)
 a {
   color: #42b983;
 }
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
 </style>

diff --git a/playground/vuex/src/components/HelloWorld.vue b/playground/vuex/src/components/HelloWorld.vue
index 36a089f1ee821e775bfe63409402e2ce2be1e5af..51f81a8f83513e6f808e5994e1fcbe1fc6884c07 100644 (file)
--- a/playground/vuex/src/components/HelloWorld.vue
+++ b/playground/vuex/src/components/HelloWorld.vue
@@ -1,17 +1,24 @@
 <template>
   <h1>{{ msg }}</h1>
 
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
+      Vite Docs
     </a>
     |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="state.count++">
-    count is: {{ state.count }}
-  </button>
+  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -35,4 +42,16 @@ const count = ref(0)
 a {
   color: #42b983;
 }
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
 </style>

diff --git a/playground/with-tests/src/components/HelloWorld.vue b/playground/with-tests/src/components/HelloWorld.vue
index 36a089f1ee821e775bfe63409402e2ce2be1e5af..51f81a8f83513e6f808e5994e1fcbe1fc6884c07 100644 (file)
--- a/playground/with-tests/src/components/HelloWorld.vue
+++ b/playground/with-tests/src/components/HelloWorld.vue
@@ -1,17 +1,24 @@
 <template>
   <h1>{{ msg }}</h1>
 
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
+      Vite Docs
     </a>
     |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="state.count++">
-    count is: {{ state.count }}
-  </button>
+  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -35,4 +42,16 @@ const count = ref(0)
 a {
   color: #42b983;
 }
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
 </style>

diff --git a/template/code/default/src/components/HelloWorld.vue b/template/code/default/src/components/HelloWorld.vue
index 36a089f1ee821e775bfe63409402e2ce2be1e5af..51f81a8f83513e6f808e5994e1fcbe1fc6884c07 100644 (file)
--- a/template/code/default/src/components/HelloWorld.vue
+++ b/template/code/default/src/components/HelloWorld.vue
@@ -1,17 +1,24 @@
 <template>
   <h1>{{ msg }}</h1>
 
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
+      Vite Docs
     </a>
     |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="state.count++">
-    count is: {{ state.count }}
-  </button>
+  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -35,4 +42,16 @@ const count = ref(0)
 a {
   color: #42b983;
 }
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
 </style>