Global properties and methods in Vue - Step-by-Step Execution

Concept Flow - Global properties and methods

Create Vue App

↓

Define Global Properties

↓

Mount App

↓

Access Global Properties in Components

↓

Use Global Methods

↓

Component Renders with Global Access

This flow shows how to add global properties and methods to a Vue app, then use them inside components.

Execution Sample

Vue

import { createApp } from 'vue'
const app = createApp({})
app.config.globalProperties.$greet = () => 'Hello!'
app.mount('#app')

This code creates a Vue app, adds a global method $greet, and mounts the app.

Execution Table

Step	Action	Global Properties State	Component Access	Output
1	Create Vue app	{}	N/A	No output
2	Add global method $greet	{$greet: function}	N/A	No output
3	Mount app	{$greet: function}	Components can access $greet	No output
4	Component calls $greet()	{$greet: function}	Access this.$greet()	Returns 'Hello!'
5	Component renders greeting	{$greet: function}	Used in template	Displays 'Hello!'

💡 App is mounted and components can use global properties and methods

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
app.config.globalProperties	{}	{$greet: function}	{$greet: function}	{$greet: function}

Key Moments - 2 Insights

Why can't we access global properties before mounting the app?

Global properties are added before mounting, but components only access them after mounting, as shown in execution_table steps 2 and 3.

How do components access global methods like $greet?

Components access global methods via this.$greet or using setup context, as shown in execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the state of globalProperties after step 2?

A It contains the mounted app instance

B It is still empty

C It contains the $greet function

D It contains component data

💡 Hint

Check the 'Global Properties State' column at step 2 in the execution_table

At which step do components start accessing the global method $greet?

A Step 2

B Step 3

C Step 1

D Step 5

💡 Hint

Look at the 'Component Access' column in the execution_table

If we add another global property $farewell, when will components be able to use it?

A Only after mounting the app

B Immediately after adding it

C Only after the component is created

D Only after the app is unmounted

💡 Hint

Refer to the flow from adding global properties to mounting in concept_flow and execution_table

Concept Snapshot

Vue Global Properties & Methods:
- Add via app.config.globalProperties
- Use $ prefix (e.g., $greet)
- Add before mounting app
- Access in components via this.$greet
- Useful for shared functions or values

Full Transcript

In Vue, you create an app instance first. Then you add global properties or methods to app.config.globalProperties. These are shared across all components. After adding, you mount the app to the DOM. Components can then access these global properties using this.$propertyName. For example, a global method $greet can be called inside any component to return a greeting. This helps share common functions or data easily. The execution table shows each step: creating the app, adding global methods, mounting, and component usage. Remember, components only see global properties after the app is mounted.

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