diff --git a/lib/components/base/EnvironmentIndicator.vue b/lib/components/base/EnvironmentIndicator.vue
index 5ec43772da..95848c597d 100644
--- a/lib/components/base/EnvironmentIndicator.vue
+++ b/lib/components/base/EnvironmentIndicator.vue
@@ -47,9 +47,10 @@
     </template>
   </span>
 </template>
-<script setup>
+<script setup lang="ts">
 import { GlobeIcon, ClientIcon, ServerIcon, InfoIcon } from '@'
 import { useVIntl, defineMessages } from '@vintl/vintl'
+
 const messages = defineMessages({
   clientLabel: {
     id: 'omorphia.component.environment-indicator.label.client',
@@ -77,50 +78,27 @@ const messages = defineMessages({
   },
 })
 const { formatMessage } = useVIntl()
-</script>
-<script>
-import { defineComponent } from 'vue'
 
-export default defineComponent({
-  props: {
-    type: {
-      type: String,
-      default: 'mod',
-    },
-    serverSide: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    clientSide: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    typeOnly: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    alwaysShow: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    search: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    categories: {
-      type: Array,
-      required: false,
-      default() {
-        return []
-      },
-    },
-  },
-})
+withDefaults(
+  defineProps<{
+    type: string
+    serverSide?: string
+    clientSide?: string
+    typeOnly?: boolean
+    alwaysShow?: boolean
+    search?: boolean
+    categories?: string[]
+  }>(),
+  {
+    type: 'mod',
+    serverSide: '',
+    clientSide: '',
+    typeOnly: false,
+    alwaysShow: false,
+    search: false,
+    categories: () => [],
+  }
+)
 </script>
 <style lang="scss" scoped>
 .environment {