Reactive data with ref in Vue - Mini Project: Build & Apply

Reactive Data with ref in Vue 3

📖 Scenario: You are building a simple Vue 3 component that tracks the number of clicks on a button. This is a common task in web apps where you want to react to user actions and update the interface automatically.

🎯 Goal: Create a Vue 3 component using the Composition API that uses ref to hold a reactive counter. The counter should start at zero and increase by one each time the button is clicked. The displayed number updates automatically.

📋 What You'll Learn

Use the ref function from Vue to create a reactive variable called count.

Initialize count to 0.

Create a function called increment that adds 1 to count.

Bind the increment function to a button's click event.

Display the current value of count in the template.

💡 Why This Matters

🌍 Real World

Tracking user interactions like clicks is common in web apps for features like likes, votes, or counters.

💼 Career

Understanding reactive data with ref is essential for building interactive Vue 3 applications used in modern web development jobs.

1

Set up the reactive variable with ref

Import ref from 'vue' and create a reactive variable called count initialized to 0 inside the setup() function.

Vue

// Import ref and create reactive count variable
// Your code here



  
    Count: 0
    Click me
  

Need a hint?

Use import { ref } from 'vue' and then const count = ref(0) inside <script setup>.

2

Create the increment function

Inside the setup() script, create a function called increment that increases count.value by 1.

Vue

import { ref } from 'vue'

const count = ref(0)

// Create increment function to add 1 to count.value
// Your code here



  
    Count: 0
    Click me
  

Need a hint?

Define function increment() { count.value++ } inside the script.

3

Bind the increment function to the button click

In the template, add a @click event to the <button> that calls the increment function when clicked.

Vue

import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}



  
    
    Click me
  

Need a hint?

Add @click="increment" inside the <button> tag.

4

Display the reactive count value

Update the <p> tag in the template to show the current value of count using Vue's template syntax {{ count }}.

Vue

import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}



  
    
    Count: 0
    Click me
  

Need a hint?

Use {{ count }} inside the <p> tag to show the reactive value.