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>
<...
