Functional components in Vue - Mini Project: Build & Apply

Building a Simple Functional Component in Vue 3

📖 Scenario: You are creating a small Vue 3 app that shows a greeting message. You want to use a functional component to keep it simple and fast.

🎯 Goal: Build a Vue 3 functional component that accepts a name prop and displays a greeting message like "Hello, Alice!".

📋 What You'll Learn

Create a functional component named Greeting using the defineComponent function with the functional: true option.

The component must accept a name prop of type String.

Render a <div> element containing the text Hello, {name}! where {name} is the prop value.

Use the component inside the main App component, passing the name "Alice".

💡 Why This Matters

🌍 Real World

Functional components are useful for simple UI pieces that do not need state or lifecycle hooks. They are lightweight and fast, ideal for reusable display elements.

💼 Career

Knowing how to create functional components in Vue 3 is important for frontend developers to write efficient and maintainable code, especially in large applications.

1

Create the basic Vue app setup

Create a Vue 3 App component with a template containing a <div> that says Welcome to the app!. Use the defineComponent function to define it.

Vue

import { defineComponent } from 'vue'

export default defineComponent({
  template: `Welcome to the app!`
})

# Your code here

Hint

Use defineComponent and add a template property with the welcome message inside a <div>.

2

Add a functional component named Greeting

Create a functional component named Greeting using defineComponent with the option functional: true. It should accept a props object with a name property of type String.

Vue

import { defineComponent } from 'vue'

const Greeting = defineComponent({
  functional: true,
  props: {
    name: String
  },
  // Your code here
})

export default defineComponent({
  template: `Welcome to the app!`
})

Hint

Use setup to return a render function that uses h to create a <div> with the greeting text.

3

Use the Greeting component inside App

Modify the App component to import the Greeting functional component and use it inside the template. Pass the prop name="Alice" to Greeting.

Vue

import { defineComponent, h } from 'vue'

const Greeting = defineComponent({
  functional: true,
  props: {
    name: String
  },
  setup(props) {
    return () => h('div', `Hello, ${props.name}!`)
  }
})

export default defineComponent({
  components: { Greeting },
  template: `
    
  `
  # Your code here
})

Hint

Register Greeting in components and use it in the template with the prop name="Alice".

4

Complete the app with proper imports and export

Ensure the code imports defineComponent and h from 'vue', defines the Greeting functional component, and exports the main App component that uses Greeting with the name "Alice".

Vue

import { defineComponent, h } from 'vue'

const Greeting = defineComponent({
  functional: true,
  props: {
    name: String
  },
  setup(props) {
    return () => h('div', `Hello, ${props.name}!`)
  }
})

export default defineComponent({
  components: { Greeting },
  template: `
    
  `
})

# Your code here

Hint

Check that all imports, component definitions, and exports are present and correct.

Practice

1. What is a key characteristic of a functional component in Vue?

easy

A. It manages its own state and lifecycle hooks.

B. It requires a template section to render.

C. It can only be used with class-based components.

D. It is stateless and has no reactive data.

Solution

1. Step 1: Understand functional component basics

   Functional components in Vue are designed to be simple and stateless, meaning they do not hold reactive data or manage lifecycle hooks.

2. Step 2: Compare options with definition

   It is stateless and has no reactive data. correctly states that functional components are stateless. Options A, C, and D describe features not applicable to functional components.

3. Final Answer:

   It is stateless and has no reactive data. -> Option D

4. Quick Check:

   Functional component = stateless [OK]

Hint: Functional components do not hold state or lifecycle hooks [OK]

Common Mistakes:

• Thinking functional components have reactive state
• Assuming they use lifecycle hooks
• Confusing with class-based components

2. Which of the following is the correct syntax to define a functional component using the <script setup> syntax in Vue 3?

easy

A. <script setup functional>\nexport default { props: ['text'] }\n</script>

B. <script setup>\nimport { h } from 'vue'\nconst MyFuncComp = (props) => h('div', props.text)\n</script>

C. <script setup>\nexport default { functional: true, props: ['text'] }\n</script>

D. <script setup>\nconst MyFuncComp = (props) => <div>{props.text}</div>\n</script>

Solution

1. Step 1: Recall Vue 3 functional component syntax

   In Vue 3 with <script setup>, functional components can be defined as functions returning VNodes using the h helper.

2. Step 2: Analyze each option

   <script setup>\nimport { h } from 'vue'\nconst MyFuncComp = (props) => h('div', props.text)\n</script> correctly defines a functional component returning a div with text using h. <script setup>\nconst MyFuncComp = (props) => <div>{props.text}</div>\n</script> uses JSX-like syntax which is not default in Vue. Options B and C use options API syntax incorrectly inside <script setup>.

3. Final Answer:

   <script setup> import { h } from 'vue' const MyFuncComp = (props) => h('div', props.text) </script> -> Option B

4. Quick Check:

   Functional component = function returning VNode with h() [OK]

Hint: Use function returning h() in

Common Mistakes:

• Using options API inside
• Trying to use JSX without setup
• Missing h() helper for rendering

3. Given this functional component code, what will be rendered?

<script setup>
import { h } from 'vue'
const Greeting = (props) => h('p', `Hello, ${props.name}!`)
</script>

<template>
  <Greeting name="Alice" />
</template>

medium

A.

B. Hello, {name}!

C. Hello, Alice!

D. Error: Functional component must return a template

Solution

1. Step 1: Understand the functional component output

   The component Greeting is a function that returns a paragraph element with text including the passed prop name.

2. Step 2: Substitute the prop value

   When used with name="Alice", it renders <p>Hello, Alice!</p> as a normal HTML element.

3. Final Answer:

   <p>Hello, Alice!</p> -> Option C

4. Quick Check:

   Functional component renders HTML with props substituted [OK]

Hint: Functional components return rendered HTML with props values [OK]

Common Mistakes:

• Expecting JSX syntax output
• Thinking it returns raw component tag
• Assuming template is required

4. Identify the error in this functional component code:

<script setup>
const Button = (props) => {
  return <button>{props.label}</button>
}
</script>

medium

A. Using JSX syntax without proper setup causes an error.

B. Missing props declaration in options API.

C. Functional components cannot return elements.

D. The function should not use return statement.

Solution

1. Step 1: Check syntax used in functional component

   The code uses JSX-like syntax (<button>{props.label}</button>) inside a function without JSX support configured.

2. Step 2: Understand Vue default rendering

   Vue requires using h() helper or templates unless JSX is set up. Without JSX setup, this causes a syntax error.

3. Final Answer:

   Using JSX syntax without proper setup causes an error. -> Option A

4. Quick Check:

   JSX needs setup; otherwise use h() or template [OK]

Hint: JSX syntax requires special setup; otherwise use h() [OK]

Common Mistakes:

• Assuming JSX works by default
• Forgetting to import h()
• Thinking return statement is disallowed

5. You want to create a functional component that renders a list of items passed as a prop. Which code correctly implements this in Vue 3 using <script setup> and the h function?

hard

A. <script setup>
import { h } from 'vue'
const ItemList = (props) => h('ul', props.items.map(item => h('li', item)))
</script>

B. <script setup>
const ItemList = { functional: true, props: ['items'], template: '<ul><li v-for="item in items">{{ item }}</li></ul>' }
</script>

C. <script setup>
const ItemList = (props) => {
return <ul>{props.items.map(item => <li>{item}</li>)}

D. <script setup>
import { h } from 'vue'
const ItemList = (props) => h('ul', [h('li', props.items)])
</script>

Solution

1. Step 1: Understand how to render lists in functional components

   Using the h function, you can create an unordered list with list items by mapping over the items array and creating li elements.

2. Step 2: Analyze each option

   <script setup> import { h } from 'vue' const ItemList = (props) => h('ul', props.items.map(item => h('li', item))) </script> correctly maps each item to an li element inside a ul. <script setup> const ItemList = { functional: true, props: ['items'], template: '<ul><li v-for="item in items">{{ item }}</li></ul>' } </script> uses options API incorrectly inside <script setup>. <script setup> const ItemList = (props) => { return <ul>{props.items.map(item => <li>{item}</li>)} uses JSX without setup. <script setup> import { h } from 'vue' const ItemList = (props) => h('ul', [h('li', props.items)]) </script> incorrectly passes the whole array as a single li.

3. Final Answer:

   <script setup> import { h } from 'vue' const ItemList = (props) => h('ul', props.items.map(item => h('li', item))) </script> -> Option A

4. Quick Check:

   Map items to li elements using h() inside ul [OK]

Hint: Map array to h('li', item) inside h('ul') for lists [OK]

Common Mistakes:

• Passing whole array as one li
• Using template syntax inside script setup
• Using JSX without setup