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.

Practice

1. What is the main purpose of app.config.globalProperties in Vue?

easy

A. To add properties or methods accessible in all components

B. To register new components globally

C. To configure routing paths

D. To define component-specific data

Solution

1. Step 1: Understand the role of app.config.globalProperties

   This object allows adding properties or methods that every Vue component can access easily.

2. Step 2: Differentiate from other Vue features

   Registering components, routing, and component data are handled differently, not via globalProperties.

3. Final Answer:

   To add properties or methods accessible in all components -> Option A

4. Quick Check:

   Global properties = shared access across components [OK]

Hint: Global properties share code across all components [OK]

Common Mistakes:

• Confusing globalProperties with component registration
• Thinking it configures routing
• Assuming it stores component local data

2. Which of the following is the correct way to add a global method named logMessage in Vue 3?

easy

A. app.globalProperties.logMessage = () => console.log('Hi')

B. app.config.globalProperties.logMessage = function logMessage() { console.log('Hi') }

C. app.config.globalProperties.logMessage = () => console.log('Hi')

D. app.config.globalProperties.$logMessage = () => console.log('Hi')

Solution

1. Step 1: Recall the correct syntax for global properties

   Global properties must be added to app.config.globalProperties with a $ prefix on the property name.

2. Step 2: Check the options for correct prefix and assignment

   app.config.globalProperties.$logMessage = () => console.log('Hi') correctly uses app.config.globalProperties.$logMessage with an arrow function.

3. Final Answer:

   app.config.globalProperties.$logMessage = () => console.log('Hi') -> Option D

4. Quick Check:

   Use app.config.globalProperties.$name for globals [OK]

Hint: Global properties need $ prefix and app.config [OK]

Common Mistakes:

• Omitting the $ prefix
• Using app.globalProperties instead of app.config.globalProperties
• Assigning without a function

3. Given this setup in main.js:

app.config.globalProperties.$greet = (name) => `Hello, ${name}!`

What will be the output of this code inside a component method?

console.log(this.$greet('Alice'))

medium

A. undefined

B. Hello, Alice!

C. Error: $greet is not a function

D. Hello, ${name}!

Solution

1. Step 1: Understand the global method definition

   The method $greet is defined globally to return a greeting string with the passed name.

2. Step 2: Analyze the component call

   Calling this.$greet('Alice') invokes the global method, returning Hello, Alice!.

3. Final Answer:

   Hello, Alice! -> Option B

4. Quick Check:

   Global method call returns expected string [OK]

Hint: Global methods run with this.$name inside components [OK]

Common Mistakes:

• Expecting template literal without interpolation
• Forgetting to use this.$ prefix
• Assuming method is undefined

4. Identify the error in this Vue 3 global property setup:

app.config.globalProperties.log = function(message) {
  console.log(message)
}

// Usage in component:
this.$log('Test')

medium

A. Missing $ prefix in global property name

B. Function syntax is incorrect

C. Cannot use global properties inside components

D. Should use arrow function instead of regular function

Solution

1. Step 1: Check the global property name

   The property is named log but used as $log in the component, causing mismatch.

2. Step 2: Understand Vue global property naming convention

   Global properties must be defined with a $ prefix to match usage in components.

3. Final Answer:

   Missing $ prefix in global property name -> Option A

4. Quick Check:

   Global properties need $ prefix to match usage [OK]

Hint: Global property name and usage must both have $ prefix [OK]

Common Mistakes:

• Defining without $ but using with $
• Thinking function syntax is wrong
• Believing global properties can't be used in components

5. You want to create a global property $formatDate that formats a Date object to YYYY-MM-DD. Which is the best way to define and use it in Vue 3?

hard

A. Add a global variable formatDate in main.js and use formatDate(date) in components

B. Create a component method named formatDate and call this.formatDate(date)

C. Define in app.config.globalProperties.$formatDate as a function returning formatted string; call with this.$formatDate(date) in components

D. Use a computed property in each component to format dates

Solution

1. Step 1: Understand global property usage

   Global properties are added to app.config.globalProperties with a $ prefix and accessed via this.$name in components.

2. Step 2: Evaluate options for best practice

   Define in app.config.globalProperties.$formatDate as a function returning formatted string; call with this.$formatDate(date) in components correctly defines the formatter globally and uses it properly in components, promoting code reuse.

3. Final Answer:

   Define in app.config.globalProperties.$formatDate as a function returning formatted string; call with this.$formatDate(date) in components -> Option C

4. Quick Check:

   Global reusable methods use $ prefix and app.config [OK]

Hint: Use app.config.globalProperties with $ prefix for reusable methods [OK]

Common Mistakes:

• Defining methods only inside components losing reuse
• Using global variables without Vue context
• Not using $ prefix for global properties