wip

Author: yyx990803

package.json

@@ -10,7 +10,7 @@
     "vitepress": "^0.17.3"
   },
   "dependencies": {
-    "@vue/repl": "^0.3.0",
+    "@vue/repl": "^0.3.1",
     "@vue/theme": "^0.1.8"
   }
 }

src/.vitepress/config.js

@@ -480,6 +480,9 @@ module.exports = {
     optimizeDeps: {
       exclude: ['@vue/repl']
     },
+    server: {
+      host: true
+    },
     ssr: {
       external: ['@vue/repl']
     },

src/examples/src/handling-input/App/composition.js

@@ -5,6 +5,10 @@ export default {
     const message = ref('Hello World!')
 
     function reverseMessage() {
+      // in JavaScript, we must access/mutate the value of a ref
+      // via its .value property.
+      // Note we don't need to do so inside templates because
+      // refs are automatically "unwrapped" in templates.
       message.value = message.value.split('').reverse().join('')
     }
 

src/examples/src/handling-input/description.txt

@@ -1 +1 @@
-This example demonstrates handling user input with the v-on directive. The @click syntax is short for v-on:click
+This example demonstrates handling user input with the v-on directive. The @click syntax is short for v-on:click.

src/examples/src/hello-world/App/composition.js

@@ -1,6 +1,13 @@
+import { ref } from 'vue'
+
 export default {
   setup() {
-    const message = 'Hello World!'
+    // A "ref" is a reactive data source that stores a value.
+    // Technically, we don't need to wrap the string with ref()
+    // in order to display it, but we will see in the next
+    // example why it is needed if we ever intend to change
+    // the value.
+    const message = ref('Hello World!')
 
     return {
       message

yarn.lock

@@ -296,10 +296,10 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/repl@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@vue/repl/-/repl-0.3.0.tgz#1cae74efa01af097551f4a3c95df99a401527520"
-  integrity sha512-+uFU7vpqTE8kq69L6muMHrI0KZUdYWUwlbOSoCjNlNf1gMk7ZLqYbx4jxhswyz7/TqjH9x4eJUgGhKmMRnQZ3w==
+"@vue/repl@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@vue/repl/-/repl-0.3.1.tgz#3df4c051f80db363cfce07afdd4da3464b42d18e"
+  integrity sha512-Ispx5XonYQ8gpNiiPUD7Ujxbp0a3sITEEIFS+JZOckdwm5O822bkMDJmU9Y9vs7HvWsWNFRFW3KSVav0GoZ/QA==
 
 "@vue/[email protected]":
   version "3.2.11"