Global properties and methods in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be displayed by this Vue component using a global property?

Consider a Vue 3 app where a global property $appName is set to 'MyVueApp'. What will this component render?

Vue

import { defineComponent } from 'vue';

export default defineComponent({
  template: `<div>{{ $appName }}</div>`
});

A <div>undefined</div>

B <div>$appName</div>

C <div></div>

D <div>MyVueApp</div>

💡 Hint

Global properties are accessible in templates via this context.

Global properties added to the app instance are accessible in components as this.$appName. In templates, you can directly use {{ $appName }} to display the value.

📝 Syntax

intermediate

Which option correctly registers a global method in Vue 3?

Choose the correct way to add a global method $greet that returns 'Hello' in a Vue 3 app.

A app.methods.$greet = () => 'Hello';

B app.globalMethods.$greet = () => 'Hello';

C app.config.globalProperties.$greet = () => 'Hello';

D app.globalProperties.methods.$greet = () => 'Hello';

💡 Hint

Global methods are added to app.config.globalProperties.

In Vue 3, global properties and methods are added to app.config.globalProperties. This makes them accessible in all components via this.$greet().

🔧 Debug

advanced

Why does this global property not appear in the component?

Given this setup, why does {{ $version }} show nothing in the component?

const app = Vue.createApp({});
app.config.globalProperties.version = '1.0';
app.mount('#app');

Component template: 
{{ $version }}

A Global property must start with a $ sign, so it should be <code>$version</code> in config.

B The property is set as 'version' but accessed as '$version', causing mismatch.

C Global properties are not reactive and cannot be used in templates.

D Global properties must be defined before app creation.

💡 Hint

Check the naming consistency between property definition and usage.

Global properties must be accessed with the same name as defined. Here, the property is defined as version but accessed as $version, so it is undefined in the template.

❓ state_output

advanced

What is the output when a global method modifies a reactive state?

Given this Vue 3 app code, what will be the displayed count after clicking the button once?

const app = Vue.createApp({
  data() { return { count: 0 }; },
  methods: {
    increment() { this.count++; }
  }
});
app.config.globalProperties.$incrementGlobal = function() { this.count += 2; };
app.mount('#app');

Component template:
<button @click="$incrementGlobal()">Add 2</button>
<div>Count: {{ count }}</div>

A Count: 2

B Count: NaN

C Count: 0

D Count: 1

💡 Hint

Global methods use the component instance as this.

The global method $incrementGlobal is called with this bound to the component instance, so it increments count by 2. Initial count is 0, so after one click it becomes 2.

🧠 Conceptual

expert

Which statement about Vue 3 global properties is TRUE?

Choose the correct statement about global properties and methods in Vue 3.

A Global properties can be accessed in components via <code>this</code> and must start with a $ prefix by convention.

B Global properties are reactive and automatically update all components when changed.

C Global properties must be declared inside each component's <code>data()</code> to be accessible.

D Global properties replace Vuex store and are recommended for all state management.

💡 Hint

Think about how global properties are accessed and naming conventions.

Global properties are accessible in components via this and by convention start with a $ prefix to avoid conflicts. They are not reactive by default and do not replace Vuex or other state management.