feat: Migrate to Nuxt 3 framework (#5184)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeSettingsMenu.vue

@@ -1,9 +1,18 @@
 <template>
   <div class="text-center">
-    <v-menu offset-y top nudge-top="6" :close-on-content-click="false">
-      <template #activator="{ on, attrs }">
-        <v-btn color="accent" dark v-bind="attrs" v-on="on">
-          <v-icon left>
+    <v-menu
+      offset-y
+      top
+      nudge-top="6"
+      :close-on-content-click="false"
+    >
+      <template #activator="{ props }">
+        <v-btn
+          color="accent"
+          dark
+          v-bind="props"
+        >
+          <v-icon start>
             {{ $globals.icons.cog }}
           </v-icon>
           {{ $t("general.settings") }}
@@ -15,32 +24,24 @@
             {{ $t("recipe.recipe-settings") }}
           </div>
         </v-card-title>
-        <v-divider class="mx-2"></v-divider>
+        <v-divider class="mx-2" />
         <v-card-text class="mt-n5 pt-6 pb-2">
-          <RecipeSettingsSwitches v-model="value" :is-owner="isOwner" />
+          <RecipeSettingsSwitches
+            v-model="value"
+            :is-owner="isOwner"
+          />
         </v-card-text>
       </v-card>
     </v-menu>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+<script lang="ts" setup>
 import RecipeSettingsSwitches from "./RecipeSettingsSwitches.vue";
 
-export default defineComponent({
-  components: { RecipeSettingsSwitches },
-  props: {
-    value: {
-      type: Object,
-      required: true,
-    },
-    isOwner: {
-      type: Boolean,
-      required: false,
-    },
-  },
-});
+const value = defineModel<object>({ required: true });
+
+defineProps<{ isOwner?: boolean }>();
 </script>
 
 <style lang="scss" scoped></style>