YouTip{{ formattedDate }}
export default {
data() {
return {
date: '2025-03-10'
};
},
computed: {
formattedDate() {
return this.$formatDate(this.date);
}
}
}
### 2. Global Configuration Parameters
We can also use `globalProperties` to define some global configuration parameters. For example, we can define a global API URL:
## Example
app.config.globalProperties.$apiUrl ='https://api.example.com';
Then use this parameter in components:
## Example
export default {
created() {
console.log('API URL:', this.$apiUrl);
}
}
### 3. Plugin Extension
When developing Vue plugins, `globalProperties` is also a very commonly used tool. Through it, plugins can add some methods or properties to the global scope, thereby simplifying the use of plugins.
For example, we can develop a simple logging plugin:
## Example
const Logger ={
install(app){
app.config.globalProperties.$log =function(message){
console.log(`: ${message}`);
};
}
};
app.use(Logger);
Then use this logging method in components:
## Example
export default {
mounted() {
this.$log('Component is mounted!');
}
}
* * *
## Notes
1. **Naming Conflicts**: Since `globalProperties` is global, you need to be careful when naming to avoid conflicts with methods or properties from other libraries or plugins.
2. **Type Safety**: If you are using TypeScript, you may need to add type definitions for `globalProperties` to ensure type safety.
* * Vue3 Global API](#)Vue3 Api App Config Globalproperties
* * Vue3 Global API](#)
`app.config.globalProperties` is a configuration option of the Vue application instance that allows us to add some custom properties or methods globally. These properties or methods can be directly accessed through `this` in any component of the application.
* * *
## How to use globalProperties?
### 1. Create a Vue Application Instance
First, we need to create a Vue application instance, and then add global properties or methods through `app.config.globalProperties`.
## Example
import{ createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
### 2. Add Global Properties or Methods
We can add global properties or methods through `app.config.globalProperties`. For example, we add a global method `$greet`:
## Example
app.config.globalProperties.$greet =function(name){
console.log(`Hello, ${name}!`);
};
app.mount('#app');
### 3. Use Global Properties or Methods in Components
Once we have added the global method `$greet`, we can call it directly through `this` in any component:
## Example
export default {
methods: {
sayHello() {
this.$greet('Vue Developer');
}
}
}
When the button is clicked, the console will output `Hello, Vue Developer!`.
* * *
## Application Scenarios of globalProperties
### 1. Global Utility Methods
`globalProperties` is very suitable for defining some global utility methods. For example, we can define a global method for formatting dates:
## Example
app.config.globalProperties.$formatDate =function(date){
return new Date(date).toLocaleDateString();
};
Then we can use this method in any component:
## Example