Vue components in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does a Vue component behave inside Astro?

You include a Vue component in an Astro page using <Component />. What happens when you load the page in the browser?

Astro

<script setup>
import MyVue from '../components/MyVue.vue';
</script>

<MyVue />

A The Vue component is ignored and does not render at all.

B The Vue component renders only on the server and is static on the client.

C The Vue component renders only on the client without server rendering.

D The Vue component renders on the server and hydrates on the client for interactivity.

💡 Hint

Think about how Astro handles frameworks for interactivity.

Astro renders Vue components on the server first, then hydrates them on the client so they become interactive.

📝 Syntax

intermediate

Correct way to import a Vue component in Astro

Which import statement correctly imports a Vue component named Button.vue in an Astro file?

A import Button from '../components/Button.vue';

B import { Button } from '../components/Button.vue';

C const Button = require('../components/Button.vue');

D import Button from '../components/Button.js';

💡 Hint

Vue components use default exports and .vue extension.

Vue components are default exports from .vue files, so import with default import and correct path.

🔧 Debug

advanced

Why does this Vue component not hydrate in Astro?

You have this Astro code: But the counter does not respond to clicks in the browser. What is missing?

Astro

<script setup>
import Counter from '../components/Counter.vue';
</script>

<Counter />

A Astro does not support Vue components with events.

B The Vue component file is missing a <code>&lt;script&gt;</code> block.

C You forgot to add a client directive like <code>client:load</code> to hydrate the component.

D You need to import Vue globally in the Astro file.

💡 Hint

Astro requires client directives to hydrate interactive components.

Astro renders components server-side by default. To make Vue components interactive, you must add a client directive like client:load.

❓ state_output

advanced

What is the output after clicking the button twice?

Given this Vue component used in Astro: What will the button text show after clicking it twice in the browser?

A "Clicked 2 times"

B "Clicked 0 times"

C "Clicked NaN times"

D Button does not update text after clicks

💡 Hint

Vue's ref tracks reactive state changes.

The count starts at 0 and increments by 1 on each click, so after two clicks it is 2.

🧠 Conceptual

expert

How does Astro optimize Vue components for performance?

Astro uses partial hydration for Vue components. What does this mean?

A Astro compiles Vue components into plain HTML with no JavaScript.

B Astro sends only the static HTML first, then hydrates Vue components on demand to reduce JavaScript load.

C Astro bundles all Vue components into one large JavaScript file loaded at once.

D Astro disables Vue reactivity to improve speed.

💡 Hint

Think about how Astro reduces JavaScript sent to the browser.

Partial hydration means Astro sends static HTML first and hydrates interactive parts only when needed, improving load speed.

Practice

1. What is the main reason to use Vue components inside an Astro project?

easy

A. To replace Astro's server-side rendering completely

B. To style Astro pages using Vue's CSS features

C. To write backend API routes in Vue syntax

D. To add interactive parts to otherwise static Astro pages

Solution

1. Step 1: Understand Astro's default behavior

   Astro builds mostly static pages by default, which are fast but not interactive.

2. Step 2: Role of Vue components in Astro

   Vue components add interactivity, like buttons or forms, inside these static pages.

3. Final Answer:

   To add interactive parts to otherwise static Astro pages -> Option D

4. Quick Check:

   Vue components = interactivity in Astro [OK]

Hint: Vue in Astro = add interactivity, not replace rendering [OK]

Common Mistakes:

• Thinking Vue replaces Astro's rendering
• Confusing Vue with backend API code
• Assuming Vue handles styling only

2. Which is the correct way to import and use a Vue component named MyButton.vue inside an Astro file?

easy

A. import MyButton from './MyButton.vue';

B. import MyButton from './MyButton.vue';

C. import MyButton from './MyButton.vue';

D. import MyButton from './MyButton.vue';

Solution

1. Step 1: Import Vue component correctly

   Use import MyButton from './MyButton.vue'; to import the component.

2. Step 2: Use client directive for loading

   client:load tells Astro to load the Vue component on page load, enabling interactivity.

3. Final Answer:

   import MyButton from './MyButton.vue'; <MyButton client:load /> -> Option B

4. Quick Check:

   Import + client:load = correct usage [OK]

Hint: Always add client directive to activate Vue in Astro [OK]

Common Mistakes:

• Omitting client directive causes no interactivity
• Using client:only without specifying framework
• Using client:idle without understanding lazy load

3. Given this Astro code snippet, what will be rendered on the page?

---
import Counter from './Counter.vue';
---

Assuming Counter.vue shows a button that increments a number on click.

medium

A. A button showing a number that increments when clicked

B. A static button with no click functionality

C. An error because client directive is missing

D. Nothing renders because Vue is not supported

Solution

1. Step 1: Understand client:load directive effect

   The client:load directive loads the Vue component on page load, enabling interactivity.

2. Step 2: Behavior of Counter.vue

   Counter.vue is a Vue component that shows a button with a number that increments on click, so it will work interactively.

3. Final Answer:

   A button showing a number that increments when clicked -> Option A

4. Quick Check:

   client:load + Vue component = interactive output [OK]

Hint: client:load activates Vue interactivity on page load [OK]

Common Mistakes:

• Assuming static output without interactivity
• Thinking client directive is optional
• Believing Vue components don't render in Astro

4. What is wrong with this Astro code using a Vue component?

---
import MyWidget from './MyWidget.vue';
---

Why does the component not behave interactively in the browser?

medium

A. Missing client directive to load Vue component on client

B. Incorrect import path for the Vue component

C. Vue components cannot be used in Astro files

D. The component file must be named with .astro extension

Solution

1. Step 1: Check import correctness

   The import path looks correct assuming file exists, so no error here.

2. Step 2: Identify missing client directive

   Without a client directive like client:load, Vue components render as static HTML with no interactivity.

3. Final Answer:

   Missing client directive to load Vue component on client -> Option A

4. Quick Check:

   Vue needs client directive for interactivity [OK]

Hint: Always add client:load or similar to activate Vue [OK]

Common Mistakes:

• Forgetting client directive disables interactivity
• Assuming import path error without checking
• Thinking Vue components need .astro extension

5. You want to optimize your Astro page by loading a Vue component only when it becomes visible on screen. Which client directive should you use?

import LazyWidget from './LazyWidget.vue';

Choose the correct usage:

hard

A. <LazyWidget client:load />

B. <LazyWidget client:idle />

C. <LazyWidget client:visible />

D. <LazyWidget client:only='vue' />

Solution

1. Step 1: Understand client directives for lazy loading

   client:visible loads the component only when it scrolls into view, optimizing performance.

2. Step 2: Compare other directives

   client:idle loads when browser is idle, client:load loads immediately, and client:only='vue' loads only Vue but not lazily.

3. Final Answer:

   <LazyWidget client:visible /> -> Option C

4. Quick Check:

   client:visible = load on visibility [OK]

Hint: Use client:visible to load Vue component on scroll into view [OK]

Common Mistakes:

• Using client:load loads immediately, not lazily
• Confusing client:idle with visibility trigger
• Using client:only without lazy loading effect