Typing computed properties in Vue - Mini Project: Build & Apply

Typing computed properties

📖 Scenario: You are building a simple Vue 3 app that shows a user's full name by combining their first and last names.

🎯 Goal: Create a Vue 3 component using the Composition API where you define firstName and lastName as reactive variables, then create a typed computed property fullName that combines them. Display the full name in the template.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create reactive variables firstName and lastName with initial values

Create a typed computed property fullName that returns a string combining first and last names

Display fullName in the template inside a <p> tag

💡 Why This Matters

🌍 Real World

Typing computed properties helps you build reactive user interfaces that update automatically and safely with type checking.

💼 Career

Understanding typed computed properties is essential for Vue developers to write maintainable and bug-free code in professional projects.

1

Setup reactive variables

Inside the <script setup> block, import ref from 'vue' and create two reactive variables called firstName and lastName with initial values 'John' and 'Doe' respectively.

Vue

// Import ref and create firstName and lastName reactive variables
// Your code here



  

Hint

Use import { ref } from 'vue' and then const firstName = ref('John') and const lastName = ref('Doe').

2

Add typed computed property

Import computed from 'vue' and create a computed property called fullName that returns a string combining firstName.value and lastName.value separated by a space. Add a TypeScript type annotation to fullName to indicate it is a computed ref of type string.

Vue

import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// Create typed computed property fullName here
// Your code here



  

Hint

Use computed and add the type ComputedRef<string> to fullName.

3

Display computed property in template

In the <template> section, add a <p> tag that displays the value of fullName using Vue's mustache syntax.

Vue

import { ref, computed, ComputedRef } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName: ComputedRef = computed(() => `${firstName.value} ${lastName.value}`)



   tag to show fullName here -->
  

Hint

Use <p>{{ fullName }}</p> inside the template.

4

Add accessibility and responsiveness

Add an aria-label attribute to the <p> tag with the value 'User full name'. Also, add a class attribute with the value 'full-name' for styling. Then add a <style scoped> block that sets the font size of .full-name to 1.5rem and color to #333. This ensures the full name is accessible and looks good on all screen sizes.

Vue

import { ref, computed, ComputedRef } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName: ComputedRef = computed(() => `${firstName.value} ${lastName.value}`)



   tag -->
  

Hint

Add aria-label="User full name" and class="full-name" to the <p> tag. Then add scoped CSS for .full-name.