Let’s get cooking

First, we’ll make sure we have a decent boilerplate project to begin with and start by replacing the contents of App.vue with the following:

<script setup lang="ts"></script>
<template>
  <v-layout>
    <v-container class="main">
      <main>
        <router-view />
      </main>
    </v-container>
    <v-footer app><span class="text-light-green">My Meal Planner</span>&nbsp;- &copy; {{ new Date().getFullYear() }}</v-footer>
  </v-layout>
</template>

We’ll expand on this later. Note that in the generated Vue component, the order of the <template> and <script> tags is different. I prefer starting with the <script> tag because...