The Parts of a .vue File

A .vue file has up to three parts, each in its own element. Here's an App.vue with all three:

<script setup>
const cafe = "Corner Café";
</script>

<template>
    <h1>{{ cafe }}</h1>
    <p class="hours">Open 7 am to 7 pm</p>
</template>

<style scoped>
.hours {
    color: #2f7d5b;
}
</style>

• <script setup> is the component's JavaScript: its variables and functions. It runs when the component is created, before Vue shows it.
• <template> is the template, the HTML that says what the component shows. It can use what the script has: {{ cafe }} shows the variable cafe. More about that in the next exercise.
• <style scoped> is CSS, written as in a stylesheet. scoped means that its rules apply only to this component's elements: the rule .hours here doesn't change elements with the class hours in other components. Styles for the whole app go into style.css.

Each part is optional: the last exercise's App.vue had only a template. In this course, the parts always come in this order, with an empty line between them, as in most Vue projects.

Older tutorials often write components differently, with export default { data() { … }, methods: { … } } in a plain <script>. That's the Options API, the way Vue components were written before <script setup>. It still works, but this course uses <script setup>, as new Vue projects do. When a tutorial has data(), it's the same Vue, just written the older way.