Global properties and methods in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are global properties in Vue?

Global properties are values or functions added to the Vue app instance that can be accessed in any component without importing them individually.

beginner

How do you add a global method in Vue 3?

Use app.config.globalProperties to add a method, for example: <br>app.config.globalProperties.$myMethod = () => { ... }.

intermediate

How can you access a global property inside a Vue component?

Inside a component, access it with this.$propertyName in Options API or getCurrentInstance().appContext.config.globalProperties.$propertyName in Composition API.

beginner

Why use global properties and methods in Vue?

They help share common utilities or data across components without repeated imports, making code cleaner and easier to maintain.

intermediate

What is a common use case for global methods in Vue?

Common uses include formatting dates, logging, or accessing shared services like API clients from any component easily.

How do you add a global property in Vue 3?

A app.config.globalProperties.$property = value

B Vue.prototype.$property = value

C app.global.property = value

D Vue.globalProperties.$property = value

In Vue 3, global properties are added using app.config.globalProperties.

Which of these is a correct way to access a global method inside a Vue component using Options API?

A getCurrentInstance().$myMethod()

B app.$myMethod()

C this.$myMethod()

D Vue.$myMethod()

Inside a component, global methods are accessed with this.$methodName.

Why should you avoid adding too many global properties in Vue?

A Global properties are private and cannot be accessed

B It can make debugging harder and components less reusable

C Vue does not support more than 5 global properties

D It improves performance too much

Too many global properties can clutter the app and make debugging and reuse difficult.

Which Vue API helps you access global properties in Composition API?

A getCurrentInstance()

B useGlobal()

C useApp()

D getAppInstance()

getCurrentInstance() returns the component instance, from which you can access globalProperties.

Global methods in Vue are typically prefixed with what symbol?

A &

B #

C @

D $

By convention, global properties and methods start with a $ to distinguish them.

Explain how to add and use a global method in a Vue 3 app.

Think about how the app instance config is used.

Describe benefits and potential downsides of using global properties in Vue.

Consider both convenience and maintainability.