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.