refactor: replace defineModels with defineModel

components/common/CommonAlert.vue

@@ -2,9 +2,7 @@
 const emit = defineEmits<{
   (event: 'close'): void
 }>()
-const { modelValue: visible } = defineModels<{
-  modelValue?: boolean
-}>()
+const visible = defineModel<boolean>()
 
 function close() {
   emit('close')

components/common/CommonCheckbox.vue

@@ -5,9 +5,7 @@ defineProps<{
   iconChecked?: string
   iconUnchecked?: string
 }>()
-const { modelValue } = defineModels<{
-  modelValue?: boolean | null
-}>()
+const modelValue = defineModel<boolean | null>()
 </script>
 
 <template>

components/common/CommonCropImage.vue

@@ -14,10 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
   stencilSizePercentage: 0.9,
 })
 
-const { modelValue: file } = defineModels<{
-  /** Images to be cropped */
-  modelValue: File | null
-}>()
+const file = defineModel<File | null>()
 
 const cropperDialog = ref(false)
 

components/common/CommonInputImage.vue

@@ -22,9 +22,7 @@ const emit = defineEmits<{
   (event: 'error', code: number, message: string): void
 }>()
 
-const { modelValue: file } = defineModels<{
-  modelValue: FileWithHandle | null
-}>()
+const file = defineModel<FileWithHandle | null>()
 
 const { t } = useI18n()
 

components/common/CommonRadio.vue

@@ -4,9 +4,7 @@ defineProps<{
   value: any
   hover?: boolean
 }>()
-const { modelValue } = defineModels<{
-  modelValue: any
-}>()
+const modelValue = defineModel()
 </script>
 
 <template>

components/common/CommonTabs.vue

@@ -8,9 +8,7 @@ const { options, command } = defineProps<{
   command?: boolean
 }>()
 
-const { modelValue } = defineModels<{
-  modelValue: string
-}>()
+const modelValue = defineModel<string>({ required: true })
 
 const tabs = $computed(() => {
   return options.map((option) => {

components/list/ListEntry.vue

@@ -6,9 +6,7 @@ const emit = defineEmits<{
   (e: 'listUpdated', list: mastodon.v1.List): void
   (e: 'listRemoved', id: string): void
 }>()
-const { list } = defineModels<{
-  list: mastodon.v1.List
-}>()
+const list = defineModel<mastodon.v1.List>({ required: true })
 
 const { t } = useI18n()
 const client = useMastoClient()

components/modal/ModalDialog.vue

@@ -49,13 +49,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   /** v-model dialog visibility */
-  (event: 'close',): void
+  (event: 'close'): void
 }>()
 
-const { modelValue: visible } = defineModels<{
-  /** v-model dislog visibility */
-  modelValue: boolean
-}>()
+const visible = defineModel<boolean>({ required: true })
 
 const deactivated = useDeactivated()
 const route = useRoute()
@@ -80,6 +77,8 @@ defineExpose({
 
 /** close the dialog */
 function close() {
+  if (!visible.value)
+    return
   visible.value = false
   emit('close')
 }

components/modal/ModalMediaPreviewCarousel.vue

@@ -12,9 +12,7 @@ const emit = defineEmits<{
   (event: 'close'): void
 }>()
 
-const { modelValue } = defineModels<{
-  modelValue: number
-}>()
+const modelValue = defineModel<number>({ required: true })
 
 const slideGap = 20
 const doubleTapTreshold = 250

components/nav/NavBottomMoreMenu.vue

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-let { modelValue } = $defineModels<{
-  modelValue: boolean
-}>()
+const modelValue = defineModel<boolean>({ required: true })
 const colorMode = useColorMode()
 
 const userSettings = useUserSettings()
 
 function toggleVisible() {
-  modelValue = !modelValue
+  modelValue.value = !modelValue
 }
 
 const buttonEl = ref<HTMLDivElement>()
@@ -16,7 +14,7 @@ function clickEvent(mouse: MouseEvent) {
   if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) {
     if (modelValue) {
       document.removeEventListener('click', clickEvent)
-      modelValue = false
+      modelValue.value = false
     }
   }
 }

components/notification/NotificationSubscribePushNotificationError.vue

@@ -3,9 +3,7 @@ defineProps<{
   title?: string
   message: string
 }>()
-const { modelValue } = defineModels<{
-  modelValue: boolean
-}>()
+const modelValue = defineModel<boolean>({ required: true })
 </script>
 
 <template>

components/publish/PublishLanguagePicker.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import Fuse from 'fuse.js'
 
-let { modelValue } = $defineModels<{
-  modelValue: string
-}>()
+const modelValue = defineModel<string>({ required: true })
 
 const { t } = useI18n()
 const userSettings = useUserSettings()
@@ -24,7 +22,7 @@ const languages = $computed(() =>
           if (a === 'en')
             return -1
 
-          return a === modelValue ? -1 : b === modelValue ? 1 : a.localeCompare(b)
+          return a === modelValue.value ? -1 : b === modelValue.value ? 1 : a.localeCompare(b)
         }),
 )
 
@@ -41,7 +39,7 @@ const preferredLanguages = computed(() => {
 )
 
 function chooseLanguage(language: string) {
-  modelValue = language
+  modelValue.value = language
 }
 </script>
 

components/publish/PublishVisibilityPicker.vue

@@ -3,16 +3,16 @@ const { editing } = defineProps<{
   editing?: boolean
 }>()
 
-let { modelValue } = $defineModels<{
-  modelValue: string
-}>()
+const modelValue = defineModel<string>({
+  required: true,
+})
 
 const currentVisibility = $computed(() =>
-  statusVisibilities.find(v => v.value === modelValue) || statusVisibilities[0],
+  statusVisibilities.find(v => v.value === modelValue.value) || statusVisibilities[0],
 )
 
 function chooseVisibility(visibility: string) {
-  modelValue = visibility
+  modelValue.value = visibility
 }
 </script>
 

components/settings/SettingsProfileMetadata.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { form } = defineModels<{
-  form: {
-    fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']>
-  }
-}>()
+const form = defineModel<{
+  fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']>
+}>({ required: true })
 const dropdown = $ref<any>()
 
 const fieldIcons = computed(() =>

nuxt.config.ts

@@ -34,8 +34,13 @@ export default defineNuxtConfig({
     '~/modules/pwa/index', // change to '@vite-pwa/nuxt' once released and remove pwa module
     'stale-dep/nuxt',
   ],
+  vue: {
+    defineModel: true,
+  },
   macros: {
     setupSFC: true,
+    betterDefine: false,
+    defineModels: false,
   },
   devtools: {
     enabled: true,

pages/[[server]]/lists.vue

@@ -77,8 +77,8 @@ onDeactivated(() => clearError(false))
       <CommonPaginator ref="paginatorRef" :paginator="paginator">
         <template #default="{ item }">
           <ListEntry
-            :list="item"
-            @update:list="updateEntry"
+            :model-value="item"
+            @update:model-value="updateEntry"
             @list-removed="removeEntry"
           />
         </template>

pages/settings/profile/appearance.vue

@@ -185,7 +185,7 @@ onReactivated(refreshInfo)
 
         <!-- metadata -->
 
-        <SettingsProfileMetadata v-if="isHydrated" v-model:form="form" />
+        <SettingsProfileMetadata v-if="isHydrated" v-model="form" />
 
         <!-- actions -->
         <div flex="~ gap2" justify-end>