Quick development with Vuetify

The app we’ve built so far isn’t much use to us yet. Let’s turn this into a working meal planner! Since we are going to want to abstract and compartmentalize, we’ll start by splitting some of the code of the CalendarDays.vue component.

First, we’ll create a new component, called CalendarCard.vue. We will use this to represent a calendar item and use the date formatter we’ve created:

<script setup lang="ts">import { useFormatDate } from "@/composables/formatters";
interface Card {
  date: Date;
}
const props = defineProps<{
  card: Card;
}>();
</script>
<template>
  <v-sheet class="d-flex justify-space-between">
    <v-sheet class="ma-2 pa-2">
      <h2 class="text-h2">{{ useFormatDate(card.date) }}</h2>
    <...