2022-08-28 20:08:33 -08:00
|
|
|
<template>
|
2023-09-14 09:01:24 -05:00
|
|
|
<div v-if="recipe">
|
2022-08-28 20:08:33 -08:00
|
|
|
<client-only>
|
2023-09-14 09:01:24 -05:00
|
|
|
<RecipePage :recipe="recipe" />
|
2022-08-28 20:08:33 -08:00
|
|
|
</client-only>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2023-09-14 06:40:13 -08:00
|
|
|
import { defineComponent, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
|
2022-08-28 20:08:33 -08:00
|
|
|
import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
|
2023-09-14 09:01:24 -05:00
|
|
|
import { usePublicExploreApi } from "~/composables/api/api-client";
|
2022-08-28 20:08:33 -08:00
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
components: { RecipePage },
|
2023-09-14 09:01:24 -05:00
|
|
|
layout: "explore",
|
2022-08-28 20:08:33 -08:00
|
|
|
setup() {
|
|
|
|
const route = useRoute();
|
|
|
|
const router = useRouter();
|
2023-08-20 13:38:46 -05:00
|
|
|
const groupSlug = route.value.params.groupSlug;
|
2023-09-14 09:01:24 -05:00
|
|
|
const recipeSlug = route.value.params.recipeSlug;
|
|
|
|
const api = usePublicExploreApi(groupSlug);
|
2022-08-28 20:08:33 -08:00
|
|
|
|
2023-09-14 06:40:13 -08:00
|
|
|
const { title } = useMeta();
|
2022-08-28 20:08:33 -08:00
|
|
|
|
|
|
|
const recipe = useAsync(async () => {
|
2023-09-14 09:01:24 -05:00
|
|
|
const { data, error } = await api.explore.recipes.getOne(recipeSlug);
|
2022-08-28 20:08:33 -08:00
|
|
|
|
|
|
|
if (error) {
|
|
|
|
console.error("error loading recipe -> ", error);
|
|
|
|
router.push("/");
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data) {
|
|
|
|
title.value = data?.name || "";
|
|
|
|
}
|
|
|
|
|
|
|
|
return data;
|
|
|
|
});
|
|
|
|
|
|
|
|
return {
|
|
|
|
recipe,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
head: {},
|
|
|
|
});
|
|
|
|
</script>
|