diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index 24c9b0dd..dc7d9f45 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -281,6 +281,9 @@ export default {
     },
   },
   methods: {
+    __(message) {
+      return __(message)
+    },
     rootRef() {
       return this.$refs['rootRef']
     },
diff --git a/src/components/Card.vue b/src/components/Card.vue
index 74c26a16..df50ae18 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -25,24 +25,19 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
 import { __ } from '../utils/translation'
 import LoadingText from './LoadingText.vue'
-export default {
-  name: 'Card',
-  props: {
-    title: {
-      type: String,
-    },
-    subtitle: {
-      type: String,
-    },
-    loading: {
-      type: Boolean,
-    },
+
+const props = defineProps({
+  title: {
+    type: String,
   },
-  components: {
-    LoadingText,
+  subtitle: {
+    type: String,
   },
-}
+  loading: {
+    type: Boolean,
+  },
+})
 </script>
diff --git a/src/components/ConfirmDialog.vue b/src/components/ConfirmDialog.vue
index 78b1016e..bf0372b6 100644
--- a/src/components/ConfirmDialog.vue
+++ b/src/components/ConfirmDialog.vue
@@ -2,7 +2,11 @@
   <Dialog v-model="showDialog" :options="{ title: __(title) }">
     <template #body-content>
       <div class="space-y-4">
-        <p class="text-p-base text-gray-800" v-if="message" v-html="__(message)" />
+        <p
+          class="text-p-base text-gray-800"
+          v-if="message"
+          v-html="__(message)"
+        />
       </div>
     </template>
     <template #actions>
@@ -11,7 +15,7 @@
   </Dialog>
 </template>
 <script>
-import { __ } from '../utils/translation';
+import { __ } from '../utils/translation'
 import { Button } from './Button'
 import Dialog from './Dialog.vue'
 
@@ -41,6 +45,9 @@ export default {
     }
   },
   methods: {
+    __(message) {
+      return __(message)
+    },
     handleConfirmation() {
       try {
         this.onConfirm?.({
diff --git a/src/components/ErrorMessage.vue b/src/components/ErrorMessage.vue
index 71e88894..8888ee07 100644
--- a/src/components/ErrorMessage.vue
+++ b/src/components/ErrorMessage.vue
@@ -7,19 +7,22 @@
   ></div>
 </template>
 
-<script>
+<script setup>
 import { __ } from '../utils/translation'
-export default {
-  name: 'ErrorMessage',
-  props: ['message'],
-  computed: {
-    errorMessage() {
-      if (!this.message) return ''
-      if (this.message instanceof Error) {
-        return this.message.messages || this.message.message
-      }
-      return __(this.message)
-    },
+import { computed } from 'vue'
+
+const props = defineProps({
+  message: {
+    type: [String, Error],
+    required: true,
   },
-}
+})
+
+const errorMessage = computed(() => {
+  if (!props.message) return ''
+  if (props.message instanceof Error) {
+    return props.message.messages || props.message.message
+  }
+  return __(props.message)
+})
 </script>
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 63d54827..6428e1ad 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -141,6 +141,9 @@ export default {
   },
   emits: ['input', 'change', 'update:modelValue'],
   methods: {
+    __(message) {
+      return __(message)
+    },
     focus() {
       this.$refs.input.focus()
     },
diff --git a/src/components/ListItem.vue b/src/components/ListItem.vue
index b8418715..12a38e2b 100644
--- a/src/components/ListItem.vue
+++ b/src/components/ListItem.vue
@@ -14,16 +14,23 @@
     <slot name="actions"></slot>
   </div>
 </template>
-<script>
+<script setup>
 import { __ } from '../utils/translation'
-export default {
-  name: 'ListItem',
-  props: ['title', 'subtitle'],
-  computed: {
-    secondaryText() {
-      let text = __(this.subtitle) || ''
-      return text.replace('\n', '<br>')
-    },
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
   },
-}
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+
+const secondaryText = computed(() => {
+  let text = __(props.subtitle) || ''
+  return text.replace('\n', '<br>')
+})
 </script>
diff --git a/src/components/LoadingText.vue b/src/components/LoadingText.vue
index 0521a0fa..a54e049c 100644
--- a/src/components/LoadingText.vue
+++ b/src/components/LoadingText.vue
@@ -3,20 +3,14 @@
     <LoadingIndicator class="-ml-1 mr-2 h-3 w-3" /> {{ __(text) }}
   </div>
 </template>
-<script>
+<script setup>
 import { __ } from '../utils/translation'
 import LoadingIndicator from './LoadingIndicator.vue'
 
-export default {
-  name: 'Loading',
-  props: {
-    text: {
-      type: String,
-      default: 'Loading...',
-    },
+const props = defineProps({
+  text: {
+    type: String,
+    default: 'Loading...',
   },
-  components: {
-    LoadingIndicator,
-  },
-}
+})
 </script>
diff --git a/src/components/TabButtons.vue b/src/components/TabButtons.vue
index 86d33f4b..7f3bdc38 100644
--- a/src/components/TabButtons.vue
+++ b/src/components/TabButtons.vue
@@ -36,38 +36,27 @@
     </div>
   </RadioGroup>
 </template>
-<script>
+<script setup>
 import { __ } from '../utils/translation'
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
 import FeatherIcon from './FeatherIcon.vue'
+import { computed } from 'vue'
 
-export default {
-  name: 'TabButtons',
-  props: {
-    buttons: {
-      type: Array,
-      required: true,
-    },
-    modelValue: {
-      type: [String, Boolean, Number],
-    },
+const props = defineProps({
+  buttons: {
+    type: Array,
+    required: true,
   },
-  emits: ['update:modelValue'],
-  components: {
-    FeatherIcon,
-    RadioGroup,
-    RadioGroupOption,
-    RadioGroupLabel,
+  modelValue: {
+    type: [String, Boolean, Number],
+    default: null,
   },
-  computed: {
-    value: {
-      get() {
-        return this.modelValue
-      },
-      set(value) {
-        this.$emit('update:modelValue', value)
-      },
-    },
-  },
-}
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
 </script>
diff --git a/src/components/TextEditor/TextEditorFloatingMenu.vue b/src/components/TextEditor/TextEditorFloatingMenu.vue
index 9a38df1d..6dfae545 100644
--- a/src/components/TextEditor/TextEditorFloatingMenu.vue
+++ b/src/components/TextEditor/TextEditorFloatingMenu.vue
@@ -24,37 +24,39 @@
     </button>
   </FloatingMenu>
 </template>
-<script>
+<script setup>
 import { __ } from '../../utils/translation'
 import { FloatingMenu } from '@tiptap/vue-3'
 import { createEditorButton } from './utils'
+import { computed, inject } from 'vue'
 
-export default {
-  name: 'TextEditorFloatingMenu',
-  props: ['buttons'],
-  components: { FloatingMenu },
-  inject: ['editor'],
-  computed: {
-    floatingMenuButtons() {
-      if (!this.buttons) return false
-
-      let buttons
-      if (Array.isArray(this.buttons)) {
-        buttons = this.buttons
-      } else {
-        buttons = [
-          'Paragraph',
-          'Heading 2',
-          'Heading 3',
-          'Bullet List',
-          'Numbered List',
-          'Blockquote',
-          'Code',
-          'Horizontal Rule',
-        ]
-      }
-      return buttons.map(createEditorButton)
-    },
+const props = defineProps({
+  buttons: {
+    type: Array,
+    default: null,
   },
-}
+})
+
+const editor = inject('editor')
+
+const floatingMenuButtons = computed(() => {
+  if (!props.buttons) return false
+
+  let buttons
+  if (Array.isArray(props.buttons)) {
+    buttons = props.buttons
+  } else {
+    buttons = [
+      'Paragraph',
+      'Heading 2',
+      'Heading 3',
+      'Bullet List',
+      'Numbered List',
+      'Blockquote',
+      'Code',
+      'Horizontal Rule',
+    ]
+  }
+  return buttons.map(createEditorButton)
+})
 </script>
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
index b997d614..16b8fcc4 100644
--- a/src/components/Toast.vue
+++ b/src/components/Toast.vue
@@ -15,7 +15,11 @@
           >
             {{ __(title) }}
           </p>
-          <p v-if="text" class="text-base text-ink-gray-5" v-html="__(text)"></p>
+          <p
+            v-if="text"
+            class="text-base text-ink-gray-5"
+            v-html="__(text)"
+          ></p>
         </slot>
       </div>
       <div class="ml-auto pl-2">
@@ -31,52 +35,41 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
 import { __ } from '../utils/translation'
 import FeatherIcon from './FeatherIcon.vue'
-const positions = [
-  'top-right',
-  'top-center',
-  'top-left',
-  'bottom-right',
-  'bottom-center',
-  'bottom-left',
-]
+import { onMounted } from 'vue'
 
-export default {
-  name: 'Toast',
-  props: {
-    position: {
-      type: String,
-      default: 'top-center',
-    },
-    icon: {
-      type: String,
-    },
-    iconClasses: {
-      type: String,
-    },
-    title: {
-      type: String,
-    },
-    text: {
-      type: String,
-    },
-    timeout: {
-      type: Number,
-      default: 5,
-    },
+const props = defineProps({
+  position: {
+    type: String,
+    default: 'top-center',
+  },
+  icon: {
+    type: String,
+  },
+  iconClasses: {
+    type: String,
   },
-  emits: ['close'],
-  components: {
-    FeatherIcon,
+  title: {
+    type: String,
   },
-  mounted() {
-    if (this.timeout > 0) {
-      setTimeout(() => {
-        this.$emit('close')
-      }, this.timeout * 1000)
-    }
+  text: {
+    type: String,
   },
-}
+  timeout: {
+    type: Number,
+    default: 5,
+  },
+})
+
+const emit = defineEmits(['close'])
+
+onMounted(() => {
+  if (props.timeout > 0) {
+    setTimeout(() => {
+      emit('close')
+    }, props.timeout * 1000)
+  }
+})
 </script>