Creating a new Vue project - Practice Exercises

Challenge - 5 Problems

📝 Syntax

intermediate

What is the correct command to create a new Vue 3 project using the official CLI?

You want to start a new Vue 3 project using the Vue CLI. Which command will correctly create the project?

A npm create vue@latest my-vue-app

B vue create my-vue-app

C vue init my-vue-app

D npm install vue create my-vue-app

💡 Hint

The latest Vue CLI uses npm create with the vue@latest package.

The modern way to create a Vue 3 project is using npm create vue@latest my-vue-app. This uses the latest official Vue scaffolding tool.

Option A is the old Vue CLI command which requires global installation and may not default to Vue 3.

Option A is from an older Vue CLI version and is deprecated.

Option A is invalid syntax.

❓ component_behavior

intermediate

What will be the rendered output of the default App.vue in a new Vue 3 project?

After creating a new Vue 3 project, the default App.vue contains a template with a <h1> tag showing "Welcome to Your Vue.js App". What will you see in the browser when you run the project?

Vue

<template>
  <h1>Welcome to Your Vue.js App</h1>
</template>

<script setup>
// no script content
</script>

<style>
h1 {
  color: #42b983;
}
</style>

A No heading is shown because script is empty

B A green heading that says 'Welcome to Your Vue.js App'

C A plain heading with default black color 'Welcome to Your Vue.js App'

D An error because script setup is empty

💡 Hint

Check the style section and the template content.

The <h1> text will appear in a green color (#42b983) because of the CSS style defined in the component.

The empty <script setup> does not affect rendering.

❓ lifecycle

advanced

When does the onMounted lifecycle hook run in a Vue 3 component?

You add an onMounted hook inside the setup() function of a Vue 3 component. When exactly does this hook execute?

A After the component is mounted to the DOM and visible

B Right after the component is created but before it is added to the DOM

C Before the component is created

D Only when the component is destroyed

💡 Hint

Think about when the component is fully ready and visible.

The onMounted hook runs after the component is inserted into the DOM and visible to the user.

This is useful for code that needs the DOM elements to exist, like accessing refs or starting animations.

🔧 Debug

advanced

Why does this Vue 3 component fail to update the displayed count?

Consider this Vue 3 component code:

import { ref } from 'vue';

export default {
  setup() {
    let count = 0;
    function increment() {
      count++;
    }
    return { count, increment };
  }
}

The template uses {{ count }} and a button calls increment. Why does the displayed count not update when the button is clicked?

A Because count should be declared with const, not let

B Because increment function is not returned from setup

C Because count is a plain variable, not a reactive ref

D Because the template syntax {{ count }} is invalid

💡 Hint

Think about Vue's reactivity system and how it tracks changes.

In Vue 3, reactive state must be wrapped in ref() or reactive() to track changes.

Here, count is a plain number variable, so Vue does not detect changes and the UI does not update.

🧠 Conceptual

expert

What is the main advantage of using Vue 3's Composition API over Options API in a new project?

You are deciding between using the Options API or the Composition API for your new Vue 3 project. What is the key benefit of the Composition API?

A It requires less code because lifecycle hooks are not needed

B It automatically improves app performance without code changes

C It removes the need for templates by using only JavaScript

D It allows better organization and reuse of logic by grouping related code together

💡 Hint

Think about how code is structured and reused in larger projects.

The Composition API lets you group related reactive state, computed properties, and functions together in the setup() function.

This improves code organization and makes it easier to reuse logic across components.

Options A, B, and C are incorrect because performance depends on many factors, templates are still used, and lifecycle hooks are still needed.