feat: defineModel

Author: sxzz

app.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import DefineOptions from './examples/define-options/index.vue'
+import DefineModel from './examples/define-model/index.vue'
 </script>
 
 <template>
   <div>
     <h1>Nuxt App</h1>
     <DefineOptions />
+    <hr />
+    <DefineModel />
   </div>
 </template>

examples/define-model/child.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const { msg } = defineModel<{
+  msg: string
+}>()
+</script>
+
+<template>
+  <span>{{ msg }}</span>
+  <div>
+    <input type="text" v-model="msg" />
+  </div>
+</template>

examples/define-model/index.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Child from './child.vue'
+
+const msg = ref('msg')
+</script>
+
+<template>
+  <b>defineModel: </b>
+  <Child v-model:msg="msg" />
+</template>

package.json

@@ -10,5 +10,9 @@
   "devDependencies": {
     "nuxt": "3.0.0-rc.12",
     "unplugin-vue-macros": "^0.15.0"
+  },
+  "dependencies": {
+    "@vueuse/core": "^9.4.0",
+    "@vueuse/nuxt": "^9.4.0"
   }
 }