Access this.$root in Vue.js 3 setup()

Question

In Vue 2, you can access this.$root inside the created hook. In Vue 3, everything that would have gone inside the created hook now goes in setup().

In setup() we don't have access to this, so, how can we access anything on the root instance?

Say, I set a property on the root instance:

const app = createApp(App).mount('#app');

app.$appName = 'Vue3';

I can access this from mounted() with this.$root.$appName, how can I do this in setup()?

---

UPDATE

I can access it if I import it:

import app from '@/main';
...
setup() {
    console.log(app.$appName) // Vue3

But, this is a hassle if I have to do this for every file.

---

UPDATE 2

Another workaround is to use provide() inside App.vue and then inject() in any other components:

setup() {
    provide('$appName', 'Vue3')

setup() {
    inject('$appName') // Vue3

Answer 1

You could define global property in vue 3 :

app.config.globalProperties.appName= 'vue3'

With setup (composition api) you could use getcurrentinstance to get access to that property:

import { getCurrentInstance } from 'vue'
...
setup() {
    const app= getCurrentInstance()
    console.log(app.appContext.config.globalProperties.appName) 

Since you're still able to use the options api you could simply do :

mounted(){
   console.log(this.appName) 
}