meal_planner/pages/cookbook.vue
Ruidy bfd83a367b
feat: add Sentry error tracking integration
- Introduced SentryErrorButton component to demonstrate error tracking.
- Updated nuxt.config.ts to include Sentry module and configuration.
- Added Sentry client and server configuration files for error reporting.
- Updated package.json to include @sentry/nuxt and updated dependencies.
- Integrated SentryErrorButton component into the cookbook page.
2025-05-26 15:38:15 +02:00

32 lines
872 B
Vue

<script setup lang="ts">
import type { Recipe } from "~/types/recipe";
import { useStorage } from "@vueuse/core";
const cookbook = useStorage<Recipe[]>("cookbook", [], localStorage);
</script>
<template>
<main>
<sentry-error-button />
<div
v-if="cookbook.length === 0"
class="flex justify-center items-center min-h-screen"
>
<div class="alert alert-info">
<span>No recipes found in this category.</span>
</div>
</div>
<ul>
<li v-for="recipe in cookbook" :key="recipe.id">
<nuxt-link :to="`/${recipe.id}`">
<recipe-card
:title="recipe.title"
:picture-url="recipe.pictureUrl"
:video-url="recipe.videoUrl"
:category="recipe.category"
:origin="recipe.origin"
/>
</nuxt-link>
</li>
</ul>
</main>
</template>