Migrate Vue files from Options API to script setup

[Copilot]

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

Migration patterns

Simple components - Props only:

<!-- 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:

<!-- 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:

<!-- 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

Original prompt

Migrate all vue files to use script setup

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.