fix: add defineModel and propsDestructure options

packages/plugin-vue/README.md

@@ -58,6 +58,20 @@ export interface Options {
    */
   reactivityTransform?: boolean | string | RegExp | (string | RegExp)[]
 
+  /**
+   * Enable `defineModel` macro (experimental).
+   * https://github.com/vuejs/rfcs/discussions/503
+   * @default false
+   */
+  defineModel?: boolean
+
+  /**
+   * Enable reactive props destructure (experimental).
+   * https://github.com/vuejs/rfcs/discussions/502
+   * @default false
+   */
+  propsDestructure?: boolean
+
   /**
    * Use custom compiler-sfc instance. Can be used to force a specific version.
    */

packages/plugin-vue/src/index.ts

@@ -65,6 +65,20 @@ export interface Options {
    */
   reactivityTransform?: boolean | string | RegExp | (string | RegExp)[]
 
+  /**
+   * Enable `defineModel` macro (experimental).
+   * https://github.com/vuejs/rfcs/discussions/503
+   * @default false
+   */
+  defineModel?: boolean
+
+  /**
+   * Enable reactive props destructure (experimental).
+   * https://github.com/vuejs/rfcs/discussions/502
+   * @default false
+   */
+  propsDestructure?: boolean
+
   /**
    * Use custom compiler-sfc instance. Can be used to force a specific version.
    */

packages/plugin-vue/src/script.ts

@@ -67,6 +67,8 @@ export function resolveScript(
     isProd: options.isProduction,
     inlineTemplate: isUseInlineTemplate(descriptor, !options.devServer),
     reactivityTransform: options.reactivityTransform !== false,
+    defineModel: options.defineModel,
+    propsDestructure: options.propsDestructure,
     templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr),
     sourceMap: options.sourceMap,
     genDefaultAs: canInlineMain(descriptor, options)

playground/vue/Main.vue

@@ -24,6 +24,7 @@
     <AsyncComponent />
   </Suspense>
   <ReactivityTransform :foo="time" />
+  <PropDestructure :bar="time" />
   <SetupImportTemplate />
   <WorkerTest />
   <Url />
@@ -45,6 +46,7 @@ import ScanDep from './ScanDep.vue'
 import TsImport from './TsImport.vue'
 import AsyncComponent from './AsyncComponent.vue'
 import ReactivityTransform from './ReactivityTransform.vue'
+import PropDestructure from './PropDestructure.vue'
 import SetupImportTemplate from './setup-import-template/SetupImportTemplate.vue'
 import WorkerTest from './worker.vue'
 import { ref } from 'vue'

playground/vue/PropDestructure.vue

@@ -0,0 +1,8 @@
+<script setup>
+const { bar: baz } = defineProps(['foo'])
+</script>
+
+<template>
+  <h2>Prop Destructure</h2>
+  <p>Prop bar: {{ baz }}</p>
+</template>

playground/vue/vite.config.ts

@@ -12,6 +12,8 @@ export default defineConfig({
   plugins: [
     vuePlugin({
       reactivityTransform: true,
+      defineModel: true,
+      propsDestructure: true,
     }),
     splitVendorChunkPlugin(),
     vueI18nPlugin,