[ Vue ] Vue3 Global 변수

1. app.config.globalProperties

 

main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$hello = "hello"

app.mount('#app')

 

app.vue

<script>
    import { defineComponent } from 'vue'
    
    export default defineComponent({
        mounted() {
            console.log(this.$hello) // hello
        }
    })
</script>

 

 

2. provide / inject

 

main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.provide('$hello', 'hello')

app.mount('#app')

 

app.vue

<script setup>
    import { inject } from 'vue'
    
    console.log(inject('$hello')) // hello
</script>