Global properties and methods in Vue - Mini Project: Build & Apply

Using Global Properties and Methods in Vue 3

📖 Scenario: You are building a simple Vue 3 app where you want to use a global property and a global method across components.This helps keep your code clean and reuse common values and functions easily.

🎯 Goal: Create a Vue 3 app that sets a global property called $appName with the value 'My Vue App' and a global method called $greet that returns a greeting string.Use these global features inside a component to display the app name and a greeting message.

📋 What You'll Learn

Create a Vue app using createApp

Add a global property $appName with value 'My Vue App'

Add a global method $greet that returns 'Hello from global method!'

Use these global features inside the component's template

💡 Why This Matters

🌍 Real World

Global properties and methods let you share common data and functions easily in Vue apps, like app name, theme colors, or utility functions.

💼 Career

Understanding global properties and methods is important for building scalable Vue applications and working on team projects where shared data and functions reduce repetition.

1

Create the Vue app and component

Create a Vue app using createApp and define a component called App with a template that contains a <div> with the text Welcome to Vue!.

Vue

import { createApp } from 'vue'

const App = {
  template: `Welcome to Vue!`
}

// Your code here

Need a hint?

Use createApp(App) to create the app and app.mount('#app') to mount it.

2

Add a global property $appName

Add a global property called $appName to the Vue app instance and set its value to 'My Vue App'.

Vue

import { createApp } from 'vue'

const App = {
  template: `Welcome to Vue!`
}

const app = createApp(App)
// Add global property $appName here

app.mount('#app')

Need a hint?

Use app.config.globalProperties to add global properties.

3

Add a global method $greet

Add a global method called $greet to the Vue app instance that returns the string 'Hello from global method!'.

Vue

import { createApp } from 'vue'

const App = {
  template: `Welcome to Vue!`
}

const app = createApp(App)
app.config.globalProperties.$appName = 'My Vue App'
// Add global method $greet here

app.mount('#app')

Need a hint?

Assign a function to app.config.globalProperties.$greet that returns the greeting string.

4

Use global property and method in the component template

Update the App component template to display the global property $appName inside an <h1> and call the global method $greet() inside a <p>.

Vue

import { createApp } from 'vue'

const App = {
  template: `
    
       -->
       -->
    
  `
}

const app = createApp(App)
app.config.globalProperties.$appName = 'My Vue App'
app.config.globalProperties.$greet = () => 'Hello from global method!'
app.mount('#app')

Need a hint?

Use {{ $appName }} and {{ $greet() }} inside the template to access global property and method.