Ref and reactive in Composition API in Vue - Mini Project: Build & Apply

Ref and reactive in Composition API

📖 Scenario: You are building a simple Vue 3 app to track a user's profile information. You want to practice using ref and reactive from the Composition API to manage state.

🎯 Goal: Create a Vue 3 component using the Composition API that stores a user's name as a ref and the user's address as a reactive object with city and country. Display these values in the template.

📋 What You'll Learn

Use ref to create a reactive variable called name with the value 'Alice'.

Use reactive to create a reactive object called address with city set to 'Paris' and country set to 'France'.

Display name, address.city, and address.country in the template.

Use the <script setup> syntax for the component.

💡 Why This Matters

🌍 Real World

Managing reactive state in Vue 3 components is essential for building interactive web apps that respond to user input and data changes.

💼 Career

Understanding <code>ref</code> and <code>reactive</code> is fundamental for Vue developers to write clean, maintainable, and efficient component logic.

1

Setup the Vue component and import Composition API

Create a Vue 3 component using <script setup>. Import ref and reactive from 'vue'. Initialize a ref variable called name with the value 'Alice'.

Vue

// Your code here

Need a hint?

Use import { ref, reactive } from 'vue' and then const name = ref('Alice').

2

Create a reactive object for address

Add a reactive object called address with properties city set to 'Paris' and country set to 'France'.

Vue

import { ref, reactive } from 'vue'

const name = ref('Alice')
// Your code here

Need a hint?

Use const address = reactive({ city: 'Paris', country: 'France' }).

3

Add template to display the data

Add a <template> section that displays the name, address.city, and address.country values inside paragraphs.

Vue

import { ref, reactive } from 'vue'

const name = ref('Alice')
const address = reactive({ city: 'Paris', country: 'France' })



  

Need a hint?

Use interpolation like {{ name }} inside paragraphs in the template.

4

Complete the component with proper structure

Ensure the component has a single root element in the <template>. Wrap the paragraphs inside a <section> element for semantic structure.

Vue

import { ref, reactive } from 'vue'

const name = ref('Alice')
const address = reactive({ city: 'Paris', country: 'France' })



   element -->

Need a hint?

Wrap all paragraphs inside a single <section> element.