Why templates matter in Vue - See It in Action

Why templates matter in Vue

📖 Scenario: You are building a simple Vue app to show a list of fruits. You want to display them clearly and update the list easily.

🎯 Goal: Create a Vue component that uses a template to render a list of fruits. Learn why templates help keep your code clean and easy to understand.

📋 What You'll Learn

Create a Vue component with a template section

Define a reactive list of fruits in the script setup

Use a v-for directive in the template to loop over the fruits

Add a heading inside the template for clarity

💡 Why This Matters

🌍 Real World

Templates help developers build clear and maintainable user interfaces by separating HTML from logic.

💼 Career

Understanding Vue templates is essential for frontend developers working with Vue to create dynamic and reactive web apps.

1

Set up the fruits list

Create a Vue component with a <script setup> section and define a reactive array called fruits with these exact values: 'Apple', 'Banana', 'Cherry'.

Vue

// Define the fruits array here

Need a hint?

Use ref from Vue to make the fruits array reactive.

2

Add the template with a heading

Add a <template> section below the script. Inside it, add a <h2> heading with the text Fruit List.

Vue

import { ref } from 'vue'
const fruits = ref(['Apple', 'Banana', 'Cherry'])



  

Need a hint?

Templates in Vue use the <template> tag to hold HTML markup.

3

Loop over fruits with v-for

Inside the <template>, below the heading, add an unordered list <ul>. Use v-for="(fruit, index) in fruits" on <li> to loop over the fruits array. Display each fruit inside the list item.

Vue

import { ref } from 'vue'
const fruits = ref(['Apple', 'Banana', 'Cherry'])



  Fruit List
  

Need a hint?

Use v-for to loop and {{ }} to show the fruit name.

4

Add a key attribute for list items

In the <li> element inside the v-for, add a :key="index" attribute to help Vue track each item efficiently.

Vue

import { ref } from 'vue'
const fruits = ref(['Apple', 'Banana', 'Cherry'])



  Fruit List
  
    
      
      {{ fruit }}
    
  

Need a hint?

Adding a :key helps Vue update the list smoothly when data changes.