Vue components in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a Vue component in an Astro file.

Astro

import MyComponent from './components/MyComponent.[1]'

Drag options to blanks, or click blank then click option'

Aastro

Bvue

Cjsx

Djs

Attempts:

3 left

💡 Hint

Common Mistakes

Using .js or .jsx instead of .vue

Using .astro extension for Vue components

Vue components have the .vue file extension, so you import them with that extension.

2fill in blank

medium

Complete the code to use a Vue component inside an Astro file.

Astro

<MyComponent [1] />

Drag options to blanks, or click blank then click option'

Aclient:only

Bclient:load

Cv-if

Dv-bind

Attempts:

3 left

💡 Hint

Common Mistakes

Using Vue directives like v-if inside Astro files

Using client:load instead of client:only for Vue components

Astro uses client:only directive to render Vue components on the client side only.

3fill in blank

hard

Fix the error in the Vue component usage by completing the client directive.

Astro

<MyComponent [1] />

Drag options to blanks, or click blank then click option'

Aclient:visible

Bclient:idle

Cclient:load

Dclient:mount

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:mount which is not a valid Astro directive

Using client:only without import

client:load tells Astro to load the Vue component as soon as the page loads, fixing errors related to missing client hydration.

4fill in blank

hard

Fill both blanks to correctly import and use a Vue component with client-side rendering in Astro.

Astro

import [1] from './components/Widget.vue';

<[2] client:only="vue" />

Drag options to blanks, or click blank then click option'

AWidget

BMyWidget

CWidgetComponent

DVueWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for import and usage

Forgetting client:only directive

The imported component name must match the tag used in the Astro file to render it properly.

5fill in blank

hard

Fill all three blanks to pass a prop named 'title' with value 'Hello' to a Vue component in Astro.

Astro

import Card from './components/Card.vue';

<Card [1]=[2] [3] />

Drag options to blanks, or click blank then click option'

Atitle

B"Hello"

Cclient:only="vue"

Dclient:load

Attempts:

3 left

💡 Hint

Common Mistakes

Passing props without quotes

Forgetting client:only directive

Using client:load instead of client:only

Props are passed as attributes like title="Hello". The component must be hydrated on the client with client:only="vue".