diff --git a/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue b/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
index b357b47d8..54c2a0580 100644
--- a/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
+++ b/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
@@ -4,7 +4,7 @@
     nudge-right="50"
     :color="buttonStyle ? 'info' : 'secondary'"
   >
-    <template #activator="{ props }">
+    <template #activator="{ props: tooltipProps }">
       <v-btn
         v-if="isFavorite || showAlways"
         icon
@@ -13,7 +13,7 @@
         size="small"
         :color="buttonStyle ? 'info' : 'secondary'"
         :fab="buttonStyle"
-        v-bind="{ ...props, ...$attrs }"
+        v-bind="{ ...tooltipProps, ...$attrs }"
         @click.prevent="toggleFavorite"
       >
         <v-icon
@@ -28,47 +28,38 @@
   </v-tooltip>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useUserSelfRatings } from "~/composables/use-users";
 import { useUserApi } from "~/composables/api";
 
-export default defineNuxtComponent({
-  props: {
-    recipeId: {
-      type: String,
-      default: "",
-    },
-    showAlways: {
-      type: Boolean,
-      default: false,
-    },
-    buttonStyle: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-    const api = useUserApi();
-    const $auth = useMealieAuth();
-    const { userRatings, refreshUserRatings } = useUserSelfRatings();
-
-    const isFavorite = computed(() => {
-      const rating = userRatings.value.find(r => r.recipeId === props.recipeId);
-      return rating?.isFavorite || false;
-    });
-
-    async function toggleFavorite() {
-      if (!$auth.user.value) return;
-      if (!isFavorite.value) {
-        await api.users.addFavorite($auth.user.value?.id, props.recipeId);
-      }
-      else {
-        await api.users.removeFavorite($auth.user.value?.id, props.recipeId);
-      }
-      await refreshUserRatings();
-    }
-
-    return { isFavorite, toggleFavorite };
-  },
+interface Props {
+  recipeId?: string;
+  showAlways?: boolean;
+  buttonStyle?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  recipeId: "",
+  showAlways: false,
+  buttonStyle: false,
 });
+
+const api = useUserApi();
+const $auth = useMealieAuth();
+const { userRatings, refreshUserRatings } = useUserSelfRatings();
+
+const isFavorite = computed(() => {
+  const rating = userRatings.value.find(r => r.recipeId === props.recipeId);
+  return rating?.isFavorite || false;
+});
+
+async function toggleFavorite() {
+  if (!$auth.user.value) return;
+  if (!isFavorite.value) {
+    await api.users.addFavorite($auth.user.value?.id, props.recipeId);
+  }
+  else {
+    await api.users.removeFavorite($auth.user.value?.id, props.recipeId);
+  }
+  await refreshUserRatings();
+}
 </script>