Use Composition API for settings index (#1613)

pages/settings/index.vue

@@ -137,34 +137,23 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { Multiselect } from 'vue-multiselect'
+import { formatProjectType } from '~/plugins/shorthands.js'
 
-export default defineNuxtComponent({
+useHead({
-  components: {
-    Multiselect,
-  },
-  setup() {
-    const cosmetics = useCosmetics()
-    const tags = useTags()
-
-    return { cosmetics, tags }
-  },
-  data() {
-    return {
-      searchDisplayMode: this.cosmetics.searchDisplayMode,
-    }
-  },
-  head: {
   title: 'Display settings - Modrinth',
-  },
+})
-  computed: {
+
-    listTypes() {
+const cosmetics = useCosmetics()
-      const types = this.tags.projectTypes.map((type) => {
+const tags = useTags()
+
+const listTypes = computed(() => {
+  const types = tags.value.projectTypes.map((type) => {
     return {
       id: type.id,
-          name: this.$formatProjectType(type.id) + ' search',
+      name: formatProjectType(type.id) + ' search',
-          display: 'the ' + this.$formatProjectType(type.id).toLowerCase() + 's search page',
+      display: 'the ' + formatProjectType(type.id).toLowerCase() + 's search page',
     }
   })
   types.push({
@@ -173,7 +162,5 @@ export default defineNuxtComponent({
     display: 'user pages',
   })
   return types
-    },
-  },
 })
 </script>