<template> <p>Choose what part of this page you want to see:</p> <button @click="activeComp = 'animal-collection'">Animals</button> <button @click="activeComp = 'food-items'">Food</button><br> <div> <component :is="activeComp"></component> </div> </template> <script> export default { data() { return { activeComp: '' } } } </script> <style scoped> button { padding: 5px; margin: 10px; } div { border: dashed black 1px; padding: 20px; margin: 10px; display: inline-block; } </style>

 <template> <h1>Animals!</h1> <p>I want to learn about at least one new animal every year.</p> </template>

 <template> <h1>Food!</h1> <p>I like most types of food.</p> </template>

 import { createApp } from 'vue' import App from './App.vue' import FoodItems from './components/FoodItems.vue' import AnimalCollection from './components/AnimalCollection.vue' const app = createApp(App) app.component('food-items', FoodItems); app.component('animal-collection', AnimalCollection); app.mount('#app')