feat: use defineComponent wrapper

src/components/base/BaseButton.vue

@@ -11,10 +11,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 // see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
-export default {
+export default defineComponent({
   inheritAttrs: false,
-}
+})
 </script>
 
 <script lang="ts" setup>

src/components/home/navigation.vue

@@ -157,6 +157,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {mapState} from 'vuex'
 import draggable from 'vuedraggable'
 
@@ -169,7 +171,7 @@ import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutati
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 
 
-export default {
+export default defineComponent({
 	name: 'navigation',
 
 	components: {
@@ -285,7 +287,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/home/update.vue

@@ -8,7 +8,9 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from 'vue'
+
+export default defineComponent({
 	name: 'update',
 	data() {
 		return {
@@ -45,7 +47,7 @@ export default {
 			this.registration.waiting.postMessage('skipWaiting')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/input/button.vue

@@ -18,9 +18,11 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from 'vue'
+
+export default defineComponent({
 	name: 'x-button',
-}
+})
 </script>
 
 <script setup lang="ts">

src/components/input/colorPicker.vue

@@ -35,6 +35,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {createRandomID} from '@/helpers/randomId'
 
 const DEFAULT_COLORS = [
@@ -46,7 +48,7 @@ const DEFAULT_COLORS = [
 	'#00db60',
 ]
 
-export default {
+export default defineComponent({
 	name: 'colorPicker',
 	data() {
 		return {
@@ -105,7 +107,7 @@ export default {
 			this.update(true)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/input/datepicker.vue

@@ -111,6 +111,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 import { i18n } from '@/i18n'
@@ -121,7 +123,7 @@ import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
 
-export default {
+export default defineComponent({
 	name: 'datepicker',
 	data() {
 		return {
@@ -249,7 +251,7 @@ export default {
 			return format(newDate, 'E')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/input/editor.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import VueEasymde from './vue-easymde/vue-easymde.vue'
 import {marked} from 'marked'
 import DOMPurify from 'dompurify'
@@ -55,7 +57,7 @@ import AttachmentService from '../../services/attachment'
 import {findCheckboxesInText} from '../../helpers/checklistFromText'
 import {createRandomID} from '@/helpers/randomId'
 
-export default {
+export default defineComponent({
 	name: 'editor',
 	components: {
 		VueEasymde,
@@ -304,7 +306,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss">

src/components/input/fancycheckbox.vue

@@ -20,9 +20,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {createRandomID} from '@/helpers/randomId'
 
-export default {
+export default defineComponent({
 	name: 'fancycheckbox',
 	data() {
 		return {
@@ -57,7 +59,7 @@ export default {
 			this.$emit('change', checked)
 		},
 	},
-}
+})
 </script>
 
 

src/components/input/multiselect.vue

@@ -83,10 +83,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {i18n} from '@/i18n'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
-export default {
+export default defineComponent({
 	name: 'multiselect',
 	data() {
 		return {
@@ -366,7 +367,7 @@ export default {
 			this.$refs.searchInput.focus()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/input/vue-easymde/vue-easymde.vue

@@ -10,10 +10,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import EasyMDE from 'easymde'
 import {marked} from 'marked'
 
-export default {
+export default defineComponent({
   name: 'vue-easymde',
   props: {
     modelValue: String,
@@ -143,7 +145,7 @@ export default {
       }
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/list/partials/filter-popup.vue

@@ -28,12 +28,14 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import Filters from '@/components/list/partials/filters'
 import Popup from '@/components/misc/popup'
 
 import {getDefaultParams} from '@/composables/taskList'
 
-export default {
+export default defineComponent({
 	name: 'filter-popup',
 	components: {
 		Popup,
@@ -85,7 +87,7 @@ export default {
 			this.value = {...getDefaultParams()}
 		},
 	},
-}
+})
 </script>
 
 <style scoped lang="scss">

src/components/list/partials/filters.vue

@@ -175,6 +175,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import DatepickerWithRange from '@/components/date/datepickerWithRange'
 import Fancycheckbox from '../../input/fancycheckbox'
 
@@ -223,7 +225,7 @@ const DEFAULT_FILTERS = {
 
 export const ALPHABETICAL_SORT = 'title'
 
-export default {
+export default defineComponent({
 	name: 'filters',
 	components: {
 		DatepickerWithRange,
@@ -573,7 +575,7 @@ export default {
 			this.setSingleValueFilter('labels', 'labels', '', 'in')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/misc/create-edit.vue

@@ -41,49 +41,45 @@
 	</modal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { i18n } from '@/i18n'
 
-export default {
+defineProps({
-	name: 'create-edit',
+	title: {
-	props: {
+		type: String,
-		title: {
+		default: '',
-			type: String,
+	},
-			default: '',
+	primaryLabel: {
-		},
+		type: String,
-		primaryLabel: {
+		default() {
-			type: String,
+			return i18n.global.t('misc.create')
-			default() {
-				return i18n.global.t('misc.create')
-			},
-		},
-		primaryIcon: {
-			type: String,
-			default: 'plus',
-		},
-		primaryDisabled: {
-			type: Boolean,
-			default: false,
-		},
-		tertiary: {
-			type: String,
-			default: '',
-		},
-		wide: {
-			type: Boolean,
-			default: false,
-		},
-		loading: {
-			type: Boolean,
-			default: false,
 		},
 	},
-	emits: ['create', 'primary', 'tertiary'],
+	primaryIcon: {
-	methods: {
+		type: String,
-		primary() {
+		default: 'plus',
-			this.$emit('create')
-			this.$emit('primary')
-		},
 	},
+	primaryDisabled: {
+		type: Boolean,
+		default: false,
+	},
+	tertiary: {
+		type: String,
+		default: '',
+	},
+	wide: {
+		type: Boolean,
+		default: false,
+	},
+	loading: {
+		type: Boolean,
+		default: false,
+	},
+})
+const emit = defineEmits(['create', 'primary', 'tertiary'])
+
+function primary() {
+	emit('create')
+	emit('primary')
 }
 </script>

src/components/misc/dropdown.vue

@@ -16,9 +16,10 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
-export default {
+export default defineComponent({
 	name: 'dropdown',
 	data() {
 		return {
@@ -55,5 +56,5 @@ export default {
 			})
 		},
 	},
-}
+})
 </script>

src/components/misc/nothing.vue

@@ -2,10 +2,4 @@
 	<p class="has-text-centered has-text-grey is-italic p-4 mb-4">
 		<slot></slot>
 	</p>
-</template>
+</template>
-
-<script lang="ts">
-export default {
-	name: 'nothing',
-}
-</script>

src/components/misc/notification.vue

@@ -37,12 +37,6 @@
 	</notifications>
 </template>
 
-<script lang="ts">
-export default {
-	name: 'notification',
-}
-</script>
-
 <style scoped>
 .vue-notification {
 	z-index: 9999;

src/components/notifications/notifications.vue

@@ -48,6 +48,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import NotificationService from '@/services/notification'
 import User from '@/components/misc/user.vue'
 import names from '@/models/constants/notificationNames.json'
@@ -56,7 +58,7 @@ import {mapState} from 'vuex'
 
 const LOAD_NOTIFICATIONS_INTERVAL = 10000
 
-export default {
+export default defineComponent({
 	name: 'notifications',
 	components: {User},
 	data() {
@@ -131,7 +133,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/quick-actions/quick-actions.vue

@@ -53,6 +53,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import TaskService from '@/services/task'
 import TeamService from '@/services/team'
 
@@ -82,7 +84,7 @@ const SEARCH_MODE_TASKS = 'tasks'
 const SEARCH_MODE_LISTS = 'lists'
 const SEARCH_MODE_TEAMS = 'teams'
 
-export default {
+export default defineComponent({
 	name: 'quick-actions',
 	components: {QuickAddMagic},
 	data() {
@@ -480,7 +482,7 @@ export default {
 			this.selectedCmd = null
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/sharing/linkSharing.vue

@@ -176,6 +176,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import rights from '../../models/constants/rights'
 
 import LinkShareService from '../../services/linkShare'
@@ -184,7 +186,7 @@ import LinkShareModel from '../../models/linkShare'
 import copy from 'copy-to-clipboard'
 import {mapState} from 'vuex'
 
-export default {
+export default defineComponent({
 	name: 'linkSharing',
 	props: {
 		listId: {
@@ -256,7 +258,7 @@ export default {
 			return this.frontendUrl + 'share/' + hash + '/auth'
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/sharing/userTeam.vue

@@ -131,6 +131,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import UserNamespaceService from '../../services/userNamespace'
 import UserNamespaceModel from '../../models/userNamespace'
 import UserListModel from '../../models/userList'
@@ -149,7 +151,7 @@ import rights from '../../models/constants/rights.json'
 import Multiselect from '@/components/input/multiselect.vue'
 import Nothing from '@/components/misc/nothing.vue'
 
-export default {
+export default defineComponent({
 	name: 'userTeamShare',
 	props: {
 		type: {
@@ -363,7 +365,7 @@ export default {
 			this.found = []
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/edit-task.vue

@@ -76,6 +76,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AsyncEditor from '@/components/input/AsyncEditor'
 
 import TaskService from '../../services/task'
@@ -85,7 +87,7 @@ import EditLabels from './partials/editLabels'
 import Reminders from './partials/reminders'
 import ColorPicker from '../input/colorPicker'
 
-export default {
+export default defineComponent({
 	name: 'edit-task',
 	data() {
 		return {
@@ -151,7 +153,7 @@ export default {
 			this.$message.success({message: this.$t('task.detail.updateSuccess')})
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/gantt-component.vue

@@ -171,6 +171,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import VueDragResize from 'vue-drag-resize'
 import EditTask from './edit-task'
 
@@ -185,7 +187,7 @@ import FilterPopup from '@/components/list/partials/filter-popup.vue'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
-export default {
+export default defineComponent({
 	name: 'GanttChart',
 	components: {
 		FilterPopup,
@@ -435,7 +437,7 @@ export default {
 			return this.format(date, 'MMMM, yyyy')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/attachments.vue

@@ -136,6 +136,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AttachmentService from '../../../services/attachment'
 import AttachmentModel from '../../../models/attachment'
 import User from '../../misc/user'
@@ -144,7 +146,7 @@ import copy from 'copy-to-clipboard'
 
 import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
 
-export default {
+export default defineComponent({
 	name: 'attachments',
 	components: {
 		User,
@@ -247,7 +249,7 @@ export default {
 			copy(generateAttachmentUrl(this.taskId, attachment.id))
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/checklist-summary.vue

@@ -12,9 +12,11 @@
 </template>
 
 <script lang="ts">
-import {getChecklistStatistics} from '../../../helpers/checklistFromText'
+import {defineComponent} from 'vue'
 
-export default {
+import {getChecklistStatistics} from '@/helpers/checklistFromText'
+
+export default defineComponent({
 	name: 'checklist-summary',
 	props: {
 		task: {
@@ -34,7 +36,7 @@ export default {
 			return ((100 - progress) / 100) * c
 		},
 	},
-}
+})
 </script>
 
 <style scoped lang="scss">

src/components/tasks/partials/comments.vue

@@ -152,6 +152,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AsyncEditor from '@/components/input/AsyncEditor'
 
 import TaskCommentService from '../../../services/taskComment'
@@ -159,7 +161,7 @@ import TaskCommentModel from '../../../models/taskComment'
 import {uploadFile} from '@/helpers/attachments'
 import {mapState} from 'vuex'
 
-export default {
+export default defineComponent({
 	name: 'comments',
 	components: {
 		Editor: AsyncEditor,
@@ -302,7 +304,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/date-table-cell.vue

@@ -6,14 +6,11 @@
 	</td>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-export default {
+defineProps({
-	name: 'date-table-cell',
+	date: {
-	props: {
+		type: Date,
-		date: {
+		default: 0,
-			type: Date,
-			default: 0,
-		},
 	},
-}
+})
 </script>

src/components/tasks/partials/defer-task.vue

@@ -38,10 +38,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import TaskService from '../../../services/task'
 import flatPickr from 'vue-flatpickr-component'
 
-export default {
+export default defineComponent({
 	name: 'defer-task',
 	data() {
 		return {
@@ -129,7 +131,7 @@ export default {
 			this.$emit('update:modelValue', task)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/description.vue

@@ -30,12 +30,14 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AsyncEditor from '@/components/input/AsyncEditor'
 
 import {LOADING} from '@/store/mutation-types'
 import {mapState} from 'vuex'
 
-export default {
+export default defineComponent({
 	name: 'description',
 	components: {
 		Editor: AsyncEditor,
@@ -86,6 +88,6 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 

src/components/tasks/partials/editAssignees.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {includesById} from '@/helpers/utils'
 import UserModel from '../../../models/user'
 import ListUserService from '../../../services/listUsers'
@@ -35,7 +36,7 @@ import TaskAssigneeService from '../../../services/taskAssignee'
 import User from '../../misc/user'
 import Multiselect from '@/components/input/multiselect.vue'
 
-export default {
+export default defineComponent({
 	name: 'editAssignees',
 	components: {
 		User,
@@ -115,7 +116,7 @@ export default {
 			this.$refs.multiselect.focus()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/editLabels.vue

@@ -39,13 +39,14 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import LabelModel from '../../../models/label'
 import LabelTaskService from '../../../services/labelTask'
 
 import Multiselect from '@/components/input/multiselect.vue'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
-export default {
+export default defineComponent({
 	name: 'edit-labels',
 	props: {
 		modelValue: {
@@ -141,7 +142,7 @@ export default {
 		},
 
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/heading.vue

@@ -26,11 +26,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {mapState} from 'vuex'
 
 import Done from '@/components/misc/Done.vue'
 
-export default {
+export default defineComponent({
 	name: 'heading',
 	components: {
 		Done,
@@ -92,7 +93,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/kanban-card.vue

@@ -66,6 +66,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {playPop} from '../../../helpers/playPop'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
 import User from '../../../components/misc/user'
@@ -75,7 +77,7 @@ import ChecklistSummary from './checklist-summary'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
-export default {
+export default defineComponent({
 	name: 'kanban-card',
 	components: {
 		ChecklistSummary,
@@ -124,7 +126,7 @@ export default {
 			})
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/labels.vue

@@ -10,15 +10,12 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-export default {
+defineProps({
-	name: 'labels',
+	labels: {
-	props: {
+		required: true,
-		labels: {
-			required: true,
-		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/percentDoneSelect.vue

@@ -17,7 +17,8 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from 'vue'
+export default defineComponent({
 	name: 'percentDoneSelect',
 	props: {
 		modelValue: {
@@ -40,5 +41,5 @@ export default {
 			},
 		},
 	},
-}
+})
 </script>

src/components/tasks/partials/priorityLabel.vue

@@ -20,31 +20,23 @@
 	</span>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import priorites from '../../../models/constants/priorities'
+import priorities from '@/models/constants/priorities'
-
+	
-export default {
+defineProps({
-	name: 'priorityLabel',
+	priority: {
-	data() {
+		default: 0,
-		return {
+		type: Number,
-			priorities: priorites,
-		}
 	},
-	props: {
+	showAll: {
-		priority: {
+		type: Boolean,
-			default: 0,
+		default: false,
-			type: Number,
-		},
-		showAll: {
-			type: Boolean,
-			default: false,
-		},
-		done: {
-			type: Boolean,
-			default: false,
-		},
 	},
-}
+	done: {
+		type: Boolean,
+		default: false,
+	},
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/prioritySelect.vue

@@ -12,9 +12,10 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import priorites from '../../../models/constants/priorities'
 
-export default {
+export default defineComponent({
 	name: 'prioritySelect',
 	data() {
 		return {
@@ -47,5 +48,5 @@ export default {
 			this.$emit('change')
 		},
 	},
-}
+})
 </script>

src/components/tasks/partials/quick-add-magic.vue

@@ -88,8 +88,9 @@
 <script lang="ts">
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
 	name: 'quick-add-magic',
 	data() {
 		return {
@@ -105,5 +106,5 @@ export default {
 			return PREFIXES[this.mode]
 		},
 	},
-}
+})
 </script>

src/components/tasks/partials/relatedTasks.vue

@@ -135,6 +135,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import TaskService from '../../../services/task'
 import TaskModel from '../../../models/task'
 import TaskRelationService from '../../../services/taskRelation'
@@ -143,7 +145,7 @@ import TaskRelationModel from '../../../models/taskRelation'
 
 import Multiselect from '@/components/input/multiselect.vue'
 
-export default {
+export default defineComponent({
 	name: 'relatedTasks',
 	data() {
 		return {
@@ -307,7 +309,7 @@ export default {
 				})
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/reminders.vue

@@ -26,9 +26,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import datepicker from '@/components/input/datepicker.vue'
 
-export default {
+export default defineComponent({
 	name: 'reminders',
 	data() {
 		return {
@@ -102,7 +104,7 @@ export default {
 			this.updateData()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/repeatAfter.vue

@@ -51,9 +51,10 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import repeatModes from '@/models/constants/taskRepeatModes'
 
-export default {
+export default defineComponent({
 	name: 'repeatAfter',
 	data() {
 		return {
@@ -102,7 +103,7 @@ export default {
 			this.updateData()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/singleTaskInList.vue

@@ -92,6 +92,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import TaskModel from '../../../models/task'
 import PriorityLabel from './priorityLabel'
 import TaskService from '../../../services/task'
@@ -103,7 +105,7 @@ import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {playPop} from '@/helpers/playPop'
 import ChecklistSummary from './checklist-summary'
 
-export default {
+export default defineComponent({
 	name: 'singleTaskInList',
 	data() {
 		return {
@@ -221,7 +223,7 @@ export default {
 			})
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/store/modules/lists.ts

@@ -1,6 +1,6 @@
 import ListService from '@/services/list'
 import {setLoading} from '@/store/helper'
-import {removeListFromHistory} from '@/modules/listHistory.ts'
+import {removeListFromHistory} from '@/modules/listHistory'
 import {createNewIndexer} from '@/indexes'
 
 const {add, remove, search, update} = createNewIndexer('lists', ['title', 'description'])

src/views/404.vue

@@ -5,11 +5,8 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-export default {
+import {useTitle} from '@/composables/useTitle'
-	name: '404',
+
-	mounted() {
+useTitle(() => '404')
-		this.setTitle('404')
-	},
-}
 </script>

src/views/labels/ListLabels.vue

@@ -97,6 +97,7 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {mapState} from 'vuex'
 
 import LabelModel from '../../models/label'
@@ -105,7 +106,7 @@ import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import AsyncEditor from '@/components/input/AsyncEditor'
 import ColorPicker from '@/components/input/colorPicker'
 
-export default {
+export default defineComponent({
 	name: 'ListLabels',
 	components: {
 		ColorPicker,
@@ -160,5 +161,5 @@ export default {
 			this.$nextTick(() => this.editorActive = true)
 		},
 	},
-}
+})
 </script>

src/views/labels/NewLabel.vue

@@ -35,13 +35,14 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import LabelModel from '../../models/label'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import ColorPicker from '../../components/input/colorPicker'
 import {mapState} from 'vuex'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
-export default {
+export default defineComponent({
 	name: 'NewLabel',
 	data() {
 		return {
@@ -75,5 +76,5 @@ export default {
 			this.$message.success({message: this.$t('label.create.success')})
 		},
 	},
-}
+})
 </script>

src/views/list/ListKanban.vue

@@ -227,6 +227,7 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import draggable from 'vuedraggable'
 import cloneDeep from 'lodash.clonedeep'
 
@@ -252,7 +253,7 @@ const DRAG_OPTIONS = {
 
 const MIN_SCROLL_HEIGHT_PERCENT = 0.25
 
-export default {
+export default defineComponent({
 	name: 'Kanban',
 	components: {
 		ListWrapper,
@@ -602,7 +603,7 @@ export default {
 			saveCollapsedBucketState(this.listId, this.collapsedBuckets)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss">

src/views/list/NewList.vue

@@ -32,12 +32,13 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import ListService from '../../services/list'
 import ListModel from '../../models/list'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import ColorPicker from '../../components/input/colorPicker'
 
-export default {
+export default defineComponent({
 	name: 'NewList',
 	data() {
 		return {
@@ -70,5 +71,5 @@ export default {
 			})
 		},
 	},
-}
+})
 </script>

src/views/list/settings/archive.vue

@@ -12,9 +12,10 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import ListService from '@/services/list'
 
-export default {
+export default defineComponent({
 	name: 'list-setting-archive',
 	data() {
 		return {
@@ -46,5 +47,5 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>

src/views/list/settings/background.vue

@@ -73,6 +73,7 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {mapState} from 'vuex'
 import {getBlobFromBlurHash} from '../../../helpers/getBlobFromBlurHash'
 
@@ -85,7 +86,7 @@ import debounce from 'lodash.debounce'
 
 const SEARCH_DEBOUNCE = 300
 
-export default {
+export default defineComponent({
 	name: 'list-setting-background',
 	components: {CreateEdit},
 	data() {
@@ -179,7 +180,7 @@ export default {
 			this.$router.back()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/views/list/settings/delete.vue

@@ -13,7 +13,9 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from 'vue'
+
+export default defineComponent({
 	name: 'list-setting-delete',
 	created() {
 		this.setTitle(this.$t('list.delete.title', {list: this.list.title}))
@@ -30,5 +32,5 @@ export default {
 			this.$router.push({name: 'home'})
 		},
 	},
-}
+})
 </script>

src/views/list/settings/duplicate.vue

@@ -14,12 +14,14 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import ListDuplicateService from '@/services/listDuplicateService'
 import NamespaceSearch from '@/components/namespace/namespace-search.vue'
 import ListDuplicateModel from '@/models/listDuplicateModel'
 import CreateEdit from '@/components/misc/create-edit.vue'
 
-export default {
+export default defineComponent({
 	name: 'list-setting-duplicate',
 	data() {
 		return {
@@ -51,5 +53,5 @@ export default {
 			this.$router.push({name: 'list.index', params: {listId: duplicate.list.id}})
 		},
 	},
-}
+})
 </script>

src/views/list/settings/edit.vue

@@ -66,6 +66,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AsyncEditor from '@/components/input/AsyncEditor'
 
 import ListModel from '@/models/list'
@@ -74,7 +76,7 @@ import ColorPicker from '@/components/input/colorPicker.vue'
 import {CURRENT_LIST} from '@/store/mutation-types'
 import CreateEdit from '@/components/misc/create-edit.vue'
 
-export default {
+export default defineComponent({
 	name: 'list-setting-edit',
 	data() {
 		return {
@@ -109,5 +111,5 @@ export default {
 			this.$router.back()
 		},
 	},
-}
+})
 </script>

src/views/list/settings/share.vue

@@ -23,9 +23,11 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from 'vue'
+
+export default defineComponent({
 	name: 'list-setting-share',
-}
+})
 </script>
 
 <script lang="ts" setup>

src/views/migrator/Migrate.vue

@@ -21,9 +21,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {MIGRATORS} from './migrators'
 
-export default {
+export default defineComponent({
 	name: 'Migrate',
 	mounted() {
 		this.setTitle(this.$t('migrate.title'))
@@ -35,7 +37,7 @@ export default {
 				.filter((item) => Boolean(item))
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/views/migrator/MigrateService.vue

@@ -66,6 +66,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AbstractMigrationService from '@/services/migrator/abstractMigration'
 import AbstractMigrationFileService from '@/services/migrator/abstractMigrationFile'
 import Logo from '@/assets/logo.svg?component'
@@ -75,7 +77,7 @@ import {MIGRATORS} from './migrators'
 
 const PROGRESS_DOTS_COUNT = 8
 
-export default {
+export default defineComponent({
 	name: 'MigrateService',
 
 	components: {
@@ -170,7 +172,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/views/namespaces/ListNamespaces.vue

@@ -69,12 +69,14 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {mapState} from 'vuex'
 import Fancycheckbox from '../../components/input/fancycheckbox.vue'
 import {LOADING} from '@/store/mutation-types'
 import ListCard from '@/components/list/partials/list-card.vue'
 
-export default {
+export default defineComponent({
 	name: 'ListNamespaces',
 	components: {
 		ListCard,
@@ -103,7 +105,7 @@ export default {
 			localStorage.setItem('showArchived', JSON.stringify(this.showArchived))
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/views/namespaces/NewNamespace.vue

@@ -41,13 +41,15 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import Message from '@/components/misc/message'
 import NamespaceModel from '../../models/namespace'
 import NamespaceService from '../../services/namespace'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import ColorPicker from '../../components/input/colorPicker'
 
-export default {
+export default defineComponent({
 	name: 'NewNamespace',
 	data() {
 		return {
@@ -78,5 +80,5 @@ export default {
 			this.$router.back()
 		},
 	},
-}
+})
 </script>

src/views/namespaces/settings/archive.vue

@@ -14,9 +14,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import NamespaceService from '@/services/namespace'
 
-export default {
+export default defineComponent({
 	name: 'namespace-setting-archive',
 	data() {
 		return {
@@ -49,5 +51,5 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>

src/views/namespaces/settings/delete.vue

@@ -13,7 +13,9 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from 'vue'
+
+export default defineComponent({
 	name: 'namespace-setting-delete',
 	computed: {
 		namespace() {
@@ -41,5 +43,5 @@ export default {
 			this.$router.push({name: 'home'})
 		},
 	},
-}
+})
 </script>

src/views/namespaces/settings/edit.vue

@@ -56,6 +56,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AsyncEditor from '@/components/input/AsyncEditor'
 
 import NamespaceService from '@/services/namespace'
@@ -64,7 +66,7 @@ import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import ColorPicker from '@/components/input/colorPicker.vue'
 import CreateEdit from '@/components/misc/create-edit.vue'
 
-export default {
+export default defineComponent({
 	name: 'namespace-setting-edit',
 	data() {
 		return {
@@ -118,5 +120,5 @@ export default {
 			this.$router.back()
 		},
 	},
-}
+})
 </script>

src/views/namespaces/settings/share.vue

@@ -21,9 +21,11 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from 'vue'
+
+export default defineComponent({
 	name: 'namespace-setting-share',
-}
+})
 </script>
 
 <script lang="ts" setup>

src/views/tasks/TaskDetailView.vue

@@ -414,6 +414,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import TaskService from '../../services/task'
 import TaskModel from '../../models/task'
 
@@ -444,7 +446,7 @@ import ChecklistSummary from '../../components/tasks/partials/checklist-summary'
 import CreatedUpdated from '@/components/tasks/partials/createdUpdated'
 
 
-export default {
+export default defineComponent({
 	name: 'TaskDetailView',
 	compatConfig: { ATTR_FALSE_VALUE: false },
 	components: {
@@ -685,7 +687,7 @@ export default {
 			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/views/teams/EditTeam.vue

@@ -161,6 +161,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AsyncEditor from '@/components/input/AsyncEditor'
 import {mapState} from 'vuex'
 import { i18n } from '@/i18n'
@@ -175,7 +177,7 @@ import Rights from '../../models/constants/rights.json'
 
 import Multiselect from '@/components/input/multiselect.vue'
 
-export default {
+export default defineComponent({
 	name: 'EditTeam',
 	data() {
 		return {
@@ -297,7 +299,7 @@ export default {
 			this.foundUsers = []
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/views/teams/ListTeams.vue

@@ -26,9 +26,10 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import TeamService from '../../services/team'
 
-export default {
+export default defineComponent({
 	name: 'ListTeams',
 	data() {
 		return {
@@ -47,7 +48,7 @@ export default {
 			this.teams = await this.teamService.getAll()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/views/teams/NewTeam.vue

@@ -29,11 +29,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import TeamModel from '../../models/team'
 import TeamService from '../../services/team'
 import CreateEdit from '@/components/misc/create-edit.vue'
 
-export default {
+export default defineComponent({
 	name: 'NewTeam',
 	data() {
 		return {
@@ -64,5 +65,5 @@ export default {
 			this.$message.success({message: this.$t('team.create.success') })
 		},
 	},
-}
+})
 </script>

src/views/user/Login.vue

@@ -101,6 +101,7 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {useDebounceFn} from '@vueuse/core'
 import {mapState} from 'vuex'
 
@@ -112,7 +113,7 @@ import {redirectToProvider} from '../../helpers/redirectToProvider'
 import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
 import Password from '@/components/input/password'
 
-export default {
+export default defineComponent({
 	components: {
 		Password,
 		Message,
@@ -233,7 +234,7 @@ export default {
 
 		redirectToProvider,
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/views/user/OpenIdAuth.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {mapState} from 'vuex'
 
 import {LOADING} from '@/store/mutation-types'
@@ -17,7 +18,7 @@ import {getErrorText} from '@/message'
 import Message from '@/components/misc/message'
 import {clearLastVisited, getLastVisited} from '../../helpers/saveLastVisited'
 
-export default {
+export default defineComponent({
 	name: 'Auth',
 	components: {Message},
 	data() {
@@ -86,5 +87,5 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>

src/views/user/settings/Avatar.vue

@@ -68,13 +68,14 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {Cropper} from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
 
 import AvatarService from '@/services/avatar'
 import AvatarModel from '@/models/avatar'
 
-export default {
+export default defineComponent({
 	name: 'user-settings-avatar',
 	data() {
 		return {
@@ -144,7 +145,7 @@ export default {
 			reader.readAsDataURL(avatar[0])
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss">

src/views/user/settings/Caldav.vue

@@ -25,11 +25,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import copy from 'copy-to-clipboard'
 import {mapState} from 'vuex'
 import {CALDAV_DOCS} from '@/urls'
 
-export default {
+export default defineComponent({
 	name: 'user-settings-caldav',
 	data() {
 		return {
@@ -51,5 +52,5 @@ export default {
 	methods: {
 		copy,
 	},
-}
+})
 </script>

src/views/user/settings/DataExport.vue

@@ -39,9 +39,10 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import DataExportService from '@/services/dataExport'
 
-export default {
+export default defineComponent({
 	name: 'user-settings-data-export',
 	data() {
 		return {
@@ -71,5 +72,5 @@ export default {
 			this.password = ''
 		},
 	},
-}
+})
 </script>

src/views/user/settings/Deletion.vue

@@ -83,11 +83,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import AccountDeleteService from '@/services/accountDelete'
 import {mapState} from 'vuex'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 
-export default {
+export default defineComponent({
 	name: 'user-settings-deletion',
 	data() {
 		return {
@@ -129,5 +130,5 @@ export default {
 			this.password = ''
 		},
 	},
-}
+})
 </script>

src/views/user/settings/EmailUpdate.vue

@@ -37,10 +37,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import EmailUpdateService from '@/services/emailUpdate'
 import EmailUpdateModel from '@/models/emailUpdate'
 
-export default {
+export default defineComponent({
 	name: 'user-settings-update-email',
 	data() {
 		return {
@@ -62,5 +63,5 @@ export default {
 			this.$message.success({message: this.$t('user.settings.updateEmailSuccess')})
 		},
 	},
-}
+})
 </script>

src/views/user/settings/General.vue

@@ -132,7 +132,7 @@
 </template>
 
 <script lang="ts">
-import {computed, watch, ref} from 'vue'
+import {defineComponent, computed, watch, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import {playSoundWhenDoneKey, playPopSound} from '@/helpers/playPop'
@@ -186,7 +186,7 @@ function getPlaySoundWhenDoneSetting() {
 	return localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null
 }
 
-export default {
+export default defineComponent({
 	name: 'user-settings-general',
 	data() {
 		return {
@@ -244,5 +244,5 @@ export default {
 			})
 		},
 	},
-}
+})
 </script>

src/views/user/settings/PasswordUpdate.vue

@@ -52,10 +52,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import PasswordUpdateService from '@/services/passwordUpdateService'
 import PasswordUpdateModel from '@/models/passwordUpdate'
 
-export default {
+export default defineComponent({
 	name: 'user-settings-password-update',
 	data() {
 		return {
@@ -83,5 +84,5 @@ export default {
 			this.$message.success({message: this.$t('user.settings.passwordUpdateSuccess')})
 		},
 	},
-}
+})
 </script>

src/views/user/settings/TOTP.vue

@@ -64,11 +64,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import TotpService from '@/services/totp'
 import TotpModel from '@/models/totp'
 import {mapState} from 'vuex'
 
-export default {
+export default defineComponent({
 	name: 'user-settings-totp',
 	data() {
 		return {
@@ -129,5 +130,5 @@ export default {
 			this.$message.success({message: this.$t('user.settings.totp.disableSuccess')})
 		},
 	},
-}
+})
 </script>