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.