Props

Three espressos aren't much of a menu. Each MenuItem should show a different item, so the component has to get its data from its parent, the component that uses it, here App.vue. That's what props are for (short for properties): values that a parent passes to a component, written like the attributes of an HTML element:

<MenuItem name="Espresso" :price="2" />
<MenuItem name="Green Tea" :price="3" />

The component says which props it takes with defineProps in its <script setup>, and uses them in its template like variables:

<script setup>
defineProps({
    name: { type: String, required: true },
    price: { type: Number, required: true },
});
</script>

<template>
    <li class="item">
        <span>{{ name }}</span>
        <span class="price">€{{ price }}</span>
    </li>
</template>

Each prop has a name and an object that describes it:

• type is what kind of value it is: String for text, Number, Boolean for true or false, Array or Object.
• required: true means that the parent has to pass it.
• default is the value of the prop when the parent doesn't pass it, for example category: { type: String, default: "coffee" }.

Vue checks the props as the app runs, and when one is missing or has the wrong type, it says so in the console: [Vue warn]: Missing required prop: "name". And defineProps needs no import: Vue knows it in <script setup>.

Note the colon in :price="2". It's v-bind, which you know from :src: the value in the quotes is JavaScript, so :price="2" passes the number 2. Without the colon, a prop is always text. price="2" passes the text "2", and Vue warns:

[Vue warn]: Invalid prop: type check failed for prop "price". Expected Number with value 2, got String with value "2".

So write text without a colon, as in name="Espresso", and anything else with one: numbers, true and false, variables.