Defining components in Vue - Mini Project: Build & Apply

Defining Components in Vue

📖 Scenario: You are building a simple webpage that shows a greeting message using Vue components. Components help you organize your webpage into small, reusable parts.

🎯 Goal: Create a Vue component named GreetingMessage that displays the text "Hello, Vue learner!" and use it inside the main app.

📋 What You'll Learn

Create a Vue component named GreetingMessage using the <script setup> syntax.

The component should render a <p> tag with the exact text: "Hello, Vue learner!".

Use the GreetingMessage component inside the main App component template.

Use the Composition API with <script setup> and the ref or reactive API if needed.

💡 Why This Matters

🌍 Real World

Vue components let you build webpages by breaking the UI into small, reusable parts. This makes your code easier to manage and reuse.

💼 Career

Knowing how to define and use components is essential for frontend development jobs using Vue.js, a popular framework for building interactive web apps.

1

Create the GreetingMessage component

Create a Vue component named GreetingMessage using <script setup> that renders a <p> tag with the text "Hello, Vue learner!".

Vue

  



// Your script here

Need a hint?

Use the <template> tag to write the HTML and <script setup> for the component script.

2

Set up the main App component

Create the main App component with a <template> and <script setup> tags. Import the GreetingMessage component from the file ./GreetingMessage.vue.

Vue

  



// Import GreetingMessage component here

Need a hint?

Use import GreetingMessage from './GreetingMessage.vue' and include <GreetingMessage /> in the template.

3

Register the GreetingMessage component

In the App component, ensure the GreetingMessage component is properly imported and used inside the <template> section as a self-closing tag.

Vue

  



// Confirm import statement here

Need a hint?

Make sure the component tag is exactly <GreetingMessage /> and the import path is correct.

4

Complete the Vue app setup

Add the export default statement to the App component if needed, or confirm the component is ready to be used as the root component in a Vue app.

Vue

  



import GreetingMessage from './GreetingMessage.vue'
// Your code here

Need a hint?

With <script setup>, you do not need to write export default. Just ensure the component is correctly structured.