Defining components in Vue - Step-by-Step Execution

Concept Flow - Defining components

Start

↓

Create component file

↓

Define <script setup> block

↓

Write template with HTML

↓

Export component implicitly

↓

Import component in parent

↓

Use component tag in parent template

↓

Render component in browser

↓

Component displays UI

↓

End

This flow shows how to create a Vue component using <script setup>, then import and use it in a parent component to display UI.

Execution Sample

Vue

<template>
  <h1>Hello from MyComponent!</h1>
</template>

<script setup>
// no extra code needed here
</script>

Defines a simple Vue component that renders a heading.

Execution Table

Step	Action	Evaluation	Result
1	Read <template> block	Parse HTML inside template	Prepare render function for <h1>Hello from MyComponent!</h1>
2	Read <script setup>	No code to execute	Component script setup is empty
3	Export component	Implicit export from <script setup>	Component is ready to use
4	Import component in parent	Parent imports MyComponent	MyComponent available in parent scope
5	Use <MyComponent /> tag in parent template	Parent template includes component tag	MyComponent will render inside parent
6	Render parent component	Vue renders parent and child	Browser shows heading: Hello from MyComponent!
7	User sees UI	UI displays heading text	Visual confirmation of component working
8	End	No further steps	Component lifecycle complete

💡 All steps completed, component defined and rendered successfully

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
MyComponent	undefined	Component object created	Component imported in parent	Component rendered in DOM

Key Moments - 3 Insights

Why is there no explicit export statement in <script setup>?

In Vue's <script setup>, the component is automatically exported, so no explicit export is needed (see execution_table step 3).

How does the parent component know about MyComponent?

The parent imports MyComponent explicitly before using it in the template (see execution_table step 4 and 5).

What happens if the template is empty?

The component renders nothing visible, but it still exists as a Vue component (not shown in this trace).

Visual Quiz - 3 Questions

Look at the execution table, at which step is the component made ready to use?

A Step 3

B Step 1

C Step 5

D Step 7

💡 Hint

Check the 'Export component' action in the execution_table at step 3

At which step does the parent component include the child component in its template?

A Step 2

B Step 5

C Step 4

D Step 6

💡 Hint

Look for 'Use tag in parent template' in execution_table

If the <script setup> block had code defining a reactive variable, when would it be evaluated?

A During step 1

B During step 4

C During step 2

D During step 6

💡 Hint

Code inside