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.