chore: Migrate Vue files from Options API to script setup (#2845)

Converts 11 Vue components from `export default defineComponent` to
`<script setup>` syntax for consistency and improved TypeScript
inference.

### Migration patterns

**Simple components** - Props only:
```vue
<!-- Before -->
<script lang="ts">
export default defineComponent({
  props: {
    heading: { type: String, default: '' }
  }
})
</script>

<!-- After -->
<script setup lang="ts">
defineProps<{
  heading?: string
}>()
</script>
```

**Components with reactive state and methods**:
```vue
<!-- Before -->
<script lang="ts">
export default defineComponent({
  setup() {
    const showPassword = ref(true)
    return { showPassword }
  }
})
</script>

<!-- After -->
<script setup lang="ts">
const showPassword = ref(true)
</script>
```

**GraphQL mutations with reactive variables**:
```vue
<!-- Before -->
<script lang="ts">
export default defineComponent({
  setup() {
    const email = ref('')
    const { mutate, error } = useMutation(
      gql(`...`),
      () => ({ variables: { input: { email: email.value } } })
    )
    return { email, mutate, error }
  }
})
</script>

<!-- After -->
<script setup lang="ts">
const email = ref('')
const { mutate, error } = useMutation(
  gql(`...`) as any,  // Required for function-based options
  () => ({ variables: { input: { email: email.value } } })
)
</script>
```

### Files changed
- **Pages**: `change-password/[token].vue`, `user/forgot-password.vue`,
`user/register.vue`
- **Components**: `DetailPane.vue`, `SideBar.vue`,
`DocumentEditorInput.vue`, `DocumentEditorHeader.vue`, `tagify.vue`,
`HorizontalRule.vue`, `PasswordInput.vue`
- **Layouts**: `error.vue`

### Technical notes
- `as any` on GraphQL queries is necessary when using function-based
options for reactive variables (TypeScript limitation with
vue-apollo-composable)
- Complex component `tagify.vue` required `getCurrentInstance()` for DOM
element access in `onMounted`
- Optional chaining added to `error.vue` props for null safety

### Screenshot
![Homepage
verification](https://github.com/user-attachments/assets/dbd6e7f6-09cc-44c7-a624-0515edddaa2a)

<!-- START COPILOT CODING AGENT SUFFIX -->



<details>

<summary>Original prompt</summary>

> Migrate all vue files to use `script setup`


</details>



<!-- START COPILOT CODING AGENT TIPS -->
---

✨ Let Copilot coding agent [set things up for
you](https://github.com/JabRef/JabRefOnline/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot)
— coding agent works faster and does higher quality work when set up for
your repo.

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: tobiasdiez <[email protected]>
Co-authored-by: Tobias Diez <[email protected]>

Author: Copilot

components/DetailPane.vue

@@ -34,17 +34,12 @@
     </transition>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { useUiStore } from './../store'
 
-export default defineComponent({
-  setup() {
-    const ui = useUiStore()
-    return {
-      selectedDocumentId: computed(() => ui.selectedDocumentId),
-      isDetailsOpen: computed(() => ui.isDetailsOpen),
-      closePane: () => (ui.isDetailsOpen = false),
-    }
-  },
-})
+const ui = useUiStore()
+
+const selectedDocumentId = computed(() => ui.selectedDocumentId)
+const isDetailsOpen = computed(() => ui.isDetailsOpen)
+const closePane = () => (ui.isDetailsOpen = false)
 </script>

components/DocumentEditorHeader.vue

@@ -3,8 +3,8 @@
     {{ heading }}
   </p>
 </template>
-<script lang="ts">
-export default defineComponent({
-  props: { heading: { type: String, default: '' } },
-})
+<script setup lang="ts">
+defineProps<{
+  heading?: string
+}>()
 </script>

components/DocumentEditorInput.vue

@@ -2,10 +2,9 @@
   <!-- Auto-grow text-input, idea taken from https://css-tricks.com/auto-growing-inputs-textareas/ -->
   <span class="inline-block relative">
     <t-input
-      :value="value"
+      v-model="value"
       variant="plain"
       class="absolute w-full left-0 py-1"
-      @input="update"
     />
     <span
       class="inline-block px-3 py-1 text-base invisible border"
@@ -15,18 +14,6 @@
   </span>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    update(newValue: string) {
-      this.$emit('input', newValue)
-    },
-  },
-})
+<script setup lang="ts">
+const value = defineModel<string | null | Date>()
 </script>

components/HorizontalRule.vue

@@ -5,15 +5,10 @@
     style="--bg: white; --p: 0 10px; --trans-x: -50%; --trans-y: -50%"
   />
 </template>
-<script lang="ts">
-export default defineComponent({
-  props: {
-    content: {
-      type: String,
-      default: '',
-    },
-  },
-})
+<script setup lang="ts">
+defineProps<{
+  content?: string
+}>()
 </script>
 <style>
 .hr-with-text::after {

components/PasswordInput.vue

@@ -18,14 +18,6 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-export default defineComponent({
-  setup() {
-    const showHiddenPassword = ref(true)
-
-    return {
-      showHiddenPassword,
-    }
-  },
-})
+<script setup lang="ts">
+const showHiddenPassword = ref(true)
 </script>

components/SideBar.vue

@@ -83,52 +83,41 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { BaseTree } from '@he-tree/vue'
 import { useQuery } from '@vue/apollo-composable'
 import { gql } from '~/apollo'
 import { useUiStore } from '~/store'
 
 import '@he-tree/vue/style/default.css'
 
-export default defineComponent({
-  components: {
-    BaseTree,
-  },
-  setup() {
-    const { result } = useQuery(
-      gql(/* GraphQL */ `
-        query Groups {
-          me {
+const { result } = useQuery(
+  gql(/* GraphQL */ `
+    query Groups {
+      me {
+        id
+        groups {
+          id
+          name
+          icon
+          children {
             id
-            groups {
-              id
-              name
-              icon
-              children {
-                id
-                name
-                icon
-              }
-            }
+            name
+            icon
           }
         }
-      `),
-    )
-    const groups = computed(() => result.value?.me?.groups ?? null)
-
-    const uiStore = useUiStore()
-    function onGroupClicked(group: { id: string }) {
-      uiStore.selectedGroupId = group.id
+      }
     }
+  `),
+)
+const groups = computed(() => result.value?.me?.groups ?? null)
 
-    return {
-      groups,
-      onGroupClicked,
-      sideBarOpen: true,
-    }
-  },
-})
+const uiStore = useUiStore()
+function onGroupClicked(group: { id: string }) {
+  uiStore.selectedGroupId = group.id
+}
+
+const sideBarOpen = true
 </script>
 <style>
 .groupsTree .vtlist-inner {

components/tagify.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template v-once>
   <textarea
     v-if="type === 'textarea'"
@@ -9,84 +10,79 @@
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Tagify from '@yaireo/tagify'
 import '@yaireo/tagify/dist/tagify.css'
-import type { PropType } from 'vue'
-export default defineComponent({
-  name: 'TagsInput',
-  props: {
-    type: {
-      type: String,
-      default: 'input',
-    },
-    settings: {
-      type: Object as PropType<Tagify.TagifySettings>,
-      default: () => ({}),
-    },
-    value: {
-      type: Array as PropType<Tagify.TagData[]>, // e.g. [{"value":"cat"}, {"value":"dog"}]'
-      default: () => [],
-    },
-    delimiters: {
-      type: String,
-      default: ',',
-    },
-    whitelist: {
-      type: Array as PropType<Tagify.TagData[]>,
-      default: () => [],
-    },
-    tagClass: {
-      type: String,
-      default: '',
-    },
+
+const props = withDefaults(
+  defineProps<{
+    type?: string
+    settings?: Tagify.TagifySettings
+    value?: Tagify.TagData[]
+    delimiters?: string
+    whitelist?: Tagify.TagData[]
+    tagClass?: string
+  }>(),
+  {
+    type: 'input',
+    settings: () => ({}),
+    value: () => [],
+    delimiters: ',',
+    whitelist: () => [],
+    tagClass: '',
   },
-  data() {
-    return {
-      tagify: null as Tagify | null,
+)
+
+const emit = defineEmits<{
+  input: [value: string | Tagify.TagData[]]
+}>()
+
+const tagify = ref<Tagify | null>(null)
+
+watch(
+  () => props.value,
+  (newVal) => {
+    // Value modified externally, update tagify
+    if (newVal) {
+      // @ts-expect-error: problem in tagify types
+      tagify.value?.loadOriginalValues(newVal)
     }
   },
-  watch: {
-    value(newVal, _oldVal) {
-      // Value modified externally, update tagify
-      this.tagify?.loadOriginalValues(newVal)
-    },
-  },
-  mounted() {
-    // Install tagify
-    const tagifySettings: Tagify.TagifySettings = {
-      delimiters: this.delimiters,
-      whitelist: this.whitelist,
-      ...this.settings,
-    }
-    if (this.tagClass) {
-      if (tagifySettings.classNames) {
-        tagifySettings.classNames.tag = 'tagify__tag ' + this.tagClass
-      } else {
-        tagifySettings.classNames = {
-          tag: 'tagify__tag ' + this.tagClass,
-        }
+)
+
+onMounted(() => {
+  // Install tagify
+  const tagifySettings: Tagify.TagifySettings = {
+    delimiters: props.delimiters,
+    whitelist: props.whitelist,
+    ...props.settings,
+  }
+  if (props.tagClass) {
+    if (tagifySettings.classNames) {
+      tagifySettings.classNames.tag = 'tagify__tag ' + props.tagClass
+    } else {
+      tagifySettings.classNames = {
+        tag: 'tagify__tag ' + props.tagClass,
       }
     }
+  }
 
-    this.tagify = new Tagify(
-      this.$el as HTMLTextAreaElement | HTMLInputElement,
-      tagifySettings,
-    )
-  },
-  unmounted() {
-    this.tagify?.destroy()
-  },
-  methods: {
-    onChange(event: { target: EventTarget | null }) {
-      // Update value prop
-      this.$emit(
-        'input',
-        (event.target as HTMLInputElement | null)?.value ?? [],
-      )
-    },
-  },
+  // Get the actual DOM element (textarea or input) from the component root
+  const instance = getCurrentInstance()
+  const element = instance?.proxy?.$el as HTMLTextAreaElement | HTMLInputElement
+  if (element) {
+    tagify.value = new Tagify(element, tagifySettings)
+  }
 })
+
+onUnmounted(() => {
+  tagify.value?.destroy()
+})
+
+function onChange(event: { target: EventTarget | null }) {
+  // Update value prop
+  emit('input', (event.target as HTMLInputElement | null)?.value ?? [])
+}
 </script>
 
 <style>

layouts/error.vue

@@ -25,14 +25,13 @@
   </NuxtLayout>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 definePageMeta({ layout: false })
-export default defineComponent({
-  props: {
-    error: {
-      type: Object,
-      default: null,
-    },
-  },
-})
+
+defineProps<{
+  error: {
+    statusCode: number
+    message: string
+  }
+}>()
 </script>