Prop types and validation in Vue - Mini Project: Build & Apply

Prop types and validation

📖 Scenario: You are building a simple Vue 3 component that displays user profile information. You want to ensure the component receives the correct types of data using props with validation.

🎯 Goal: Create a Vue 3 component named UserProfile that accepts props with specific types and validation rules. The component should accept a name prop as a required string, an age prop as an optional number, and a email prop as a required string with a custom validator to check it contains an '@' character.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Define props with types and validation

Make name a required string prop

Make age an optional number prop

Make email a required string prop with a custom validator checking for '@'

Render the props inside the template

💡 Why This Matters

🌍 Real World

Validating props ensures components receive the right data types and values, preventing bugs and improving reliability in real Vue applications.

💼 Career

Understanding prop types and validation is essential for frontend developers working with Vue to build robust, maintainable UI components.

1

Create the basic Vue component and define props object

Create a Vue 3 component using <script setup>. Define a props object with three props: name, age, and email. For now, just set name and email as strings and age as a number without validation.

Vue

// Define props object with name, age, and email
// Your code here



  

Hint

Use defineProps with an object specifying name, age, and email with their types.

2

Add required and optional prop configuration

Update the props object to make name and email required props, and keep age optional. Use the object syntax for each prop with type and required fields.

Vue

const props = defineProps({
  name: { type: String, required: true },
  age: { type: Number, required: false },
  email: { type: String, required: true }
  // Your code here
})



  

Hint

Use the object syntax for each prop with type and required keys.

3

Add a custom validator for the email prop

Add a validator function to the email prop that returns true only if the email string contains the '@' character.

Vue

const props = defineProps({
  name: { type: String, required: true },
  age: { type: Number, required: false },
  email: {
    type: String,
    required: true,
    validator: value => {
      // Your code here
    }
  }
})



  

Hint

The validator function should check if value.includes('@') returns true.

4

Render the props in the template

Inside the <template>, display the name, age, and email props inside separate paragraphs. Use mustache syntax like {{ name }} to show the values.

Vue

const props = defineProps({
  name: { type: String, required: true },
  age: { type: Number, required: false },
  email: {
    type: String,
    required: true,
    validator: value => value.includes('@')
  }
})



  Name: {{ name }}
  Age: {{ age }}
  Email: {{ email }}
  

Hint

Use mustache syntax inside paragraphs to show each prop value.

Practice

1. What is the main purpose of defining props with types in a Vue component?

easy

A. To ensure the component receives data in the expected format

B. To style the component automatically

C. To make the component load faster

D. To prevent the component from rendering

Solution

1. Step 1: Understand what props do in Vue

   Props allow passing data from a parent to a child component.

2. Step 2: Recognize the role of prop types

   Defining types helps Vue check if the data matches the expected format, catching errors early.

3. Final Answer:

   To ensure the component receives data in the expected format -> Option A

4. Quick Check:

   Prop types = data format check [OK]

Hint: Prop types check data format passed to components [OK]

Common Mistakes:

• Thinking prop types affect styling
• Believing prop types improve speed
• Assuming prop types stop rendering

2. Which of the following is the correct syntax to define a required string prop named title in a Vue component?

easy

A. props: { title: String, required: true }

B. props: { title: { type: String, required: true } }

C. props: { title: { required: true type: String } }

D. props: { title: { String, required: true } }

Solution

1. Step 1: Recall Vue prop syntax for validation

   Props with validation use an object with keys like type and required.

2. Step 2: Check the correct order and structure

   The correct syntax is { type: String, required: true } inside the prop definition.

3. Final Answer:

   props: { title: { type: String, required: true } } -> Option B

4. Quick Check:

   Prop validation uses object with type and required [OK]

Hint: Use object with type and required keys for prop validation [OK]

Common Mistakes:

• Placing required outside the prop object
• Using array instead of object for validation
• Wrong order or missing keys in prop definition

3. Given this Vue component prop definition:

props: { count: { type: Number, default: 0 } }

What will be the value of count inside the component if the parent does NOT pass any count prop?

medium

A. 0

B. null

C. undefined

D. NaN

Solution

1. Step 1: Understand default prop values

   If a prop is not passed, Vue uses the default value if defined.

2. Step 2: Check the default value for count

   The default is set to 0, so count will be 0 inside the component.

3. Final Answer:

   0 -> Option A

4. Quick Check:

   Missing prop uses default value [OK]

Hint: Default prop value used if parent omits prop [OK]

Common Mistakes:

• Assuming undefined if prop is missing
• Confusing null with default value
• Expecting error when prop is missing

4. Consider this prop validation in a Vue component:

props: { age: { type: Number, required: true } }

What will happen if the parent passes age="twenty" (a string) instead of a number?

medium

A. Vue will automatically convert the string to a number

B. Vue will throw a runtime error and stop rendering

C. Vue will show a console warning about the type mismatch

D. Vue will ignore the prop and use the default value

Solution

1. Step 1: Understand Vue's prop type checking behavior

   Vue checks prop types and warns in the console if types don't match but does not stop rendering.

2. Step 2: Check what happens with wrong type

   Passing a string instead of a number triggers a console warning but no error or conversion.

3. Final Answer:

   Vue will show a console warning about the type mismatch -> Option C

4. Quick Check:

   Wrong prop type triggers warning, not error [OK]

Hint: Vue warns on wrong prop types but keeps rendering [OK]

Common Mistakes:

• Expecting runtime errors instead of warnings
• Thinking Vue auto-converts prop types
• Assuming default value is used on type mismatch

5. You want to validate a prop status that only accepts the strings 'active', 'inactive', or 'pending'. Which is the correct way to add this validation in Vue?

hard

A. props: { status: { type: String, validate: value => ['active', 'inactive', 'pending'].includes(value) } }"

B. props: { status: { type: String, required: true, default: 'active' } }

C. props: { status: { type: String, enum: ['active', 'inactive', 'pending'] } }

D. props: { status: { type: String, validator: value => ['active', 'inactive', 'pending'].includes(value) } }

Solution

1. Step 1: Recall how to restrict prop values in Vue

   Vue uses a validator function to check if a prop value is allowed.

2. Step 2: Check the correct validator syntax

   The validator is a function returning true if the value is valid, like value => ['active', 'inactive', 'pending'].includes(value).

3. Final Answer:

   props: { status: { type: String, validator: value => ['active', 'inactive', 'pending'].includes(value) } } -> Option D

4. Quick Check:

   Use validator function to restrict prop values [OK]

Hint: Use validator function to limit allowed prop values [OK]

Common Mistakes:

• Using non-existent 'enum' key for props
• Confusing 'validate' with 'validator'
• Relying only on default or required without value check