Vue project structure walkthrough - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main Vue component in main.js.

Vue

import { createApp } from 'vue';
import App from './[1]';

createApp(App).mount('#app');

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

AApp.vue

Bmain.js

Cindex.html

Drouter.js

Attempts:

3 left

💡 Hint

Common Mistakes

Importing a JavaScript file instead of the Vue component.

Using the HTML file name instead of the Vue component.

The main Vue component is usually named App.vue and imported in main.js to start the app.

2fill in blank

medium

Complete the code to register a router in the Vue app.

Vue

import { createApp } from 'vue';
import App from './App.vue';
import router from './[1]';

createApp(App).use(router).mount('#app');

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

Astore.js

Bmain.js

Crouter.js

Dindex.html

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the store file instead of the router.

Trying to import the main app file again.

The router configuration is usually in router.js and imported to use in the Vue app.

3fill in blank

hard

Fix the error in the Vue component import statement.

Vue

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

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

AhelloWorld

BHelloWorld

Chelloworld

Dhello_world

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names that don't match the file name.

Using underscores instead of camel case.

Vue component names are case-sensitive and usually use PascalCase like HelloWorld.

4fill in blank

hard

Fill both blanks to create a reactive variable and update it in Vue 3 Composition API.

Vue

import { [1] } from 'vue';

const count = [2](0);

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive for primitive values instead of objects.

Confusing computed with reactive state.

Use ref to create a reactive primitive variable like count in Vue 3 Composition API.

5fill in blank

hard

Fill all three blanks to define a computed property that doubles a count value.

Vue

import { ref, [1] } from 'vue';

const count = ref(1);
const doubleCount = [2](() => count.value [3] 2);

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

Acomputed

C*

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition instead of multiplication.

Not using computed for reactive computed values.

Use computed to create a reactive computed property. The function returns count.value * 2 to double the count.