CODEWITHSUNDEEP
javascriptvue.jsvue-componentvuejs3vue-composition-api
Dan Knights
Dan Knights

Reputation: 8378

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

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

Upvotes: 29

Views: 54795

Answers (4)

tao
tao

Reputation: 90277

If all you want is to replace {{ appName }} in any any template with 'Vue 3' (string), without having to import anything, the cleanest way would be using config.globalProperties, as suggested by other answers:

const app = createApp(App).mount('#app');
app.config.globalProperties.appName = 'Vue 3'

However, you should try not to overuse this pattern. It goes against the reusability and modularization principles which drove the development of Composition API.

The main reason why you should avoid polluting globalProperties is because it serves as pollution field across Vue3 apps, so many plugin devs might decide to provide their plugin instance using it. (Obviously, nobody will ever name a plugin appName, so you run no risk in this particular case).

The recommended alternative to globalization is exporting a useStuff() function.
In your case:

export function useAppName () { return 'Vue 3' }
// or even:
export const useAppName = () => 'Vue 3'

In any component:

import { useAppName } from '@/path/to/function'

setup () {
   const appName = useAppName()
   return {
     appName // make it available in template and hooks
   }
}

The advantages:

  • it uses the Composition API naming convention
  • when sharing something more complex than a primitive (could be a module, a set of functions, a service, etc...) all types are inferred, out of the box. This is particularly useful in setup() functions.
  • you only expose and scope your stuff where you need it exposed, not in every single component of your app. Another advantage is: if you only need it in setup() function, you don't have to expose it to template or hooks.

Example usage with a random (but real) plugin:
Create a plugin file (i.e: /plugins/gsap.ts):

import gsap from 'gsap'
import ScrollToPlugin from 'gsap/ScrollToPlugin'

// configure the plugin globally
gsap.registerPlugin(ScrollToPlugin)

export function useGsap () {
  return gsap
}

In any component:

import { defineComponent } from 'vue'
import { useGsap } from '@/plugins/gsap'

export defineComponent({
  setup () {
    const gsap = useGsap()
      // gsap here is typed correctly (if the plugin has typings)
      // no need for casting
    return { 
      gsap  // optionally provide it to hooks and template
    }       // if needed outside setup()
  }
})

Upvotes: 4

Dan Knights
Dan Knights

Reputation: 8378

For anyone wondering how they can simply access this inside setup(), one way is to set this to a memoized variable in the created() hook and use nextTick() to access it:

const app = createApp(App);

app.config.globalProperties.$appName = 'Hello!';

<script>
import { nextTick } from 'vue';

let self;

export default {
    name: 'HelloWorld',

    setup() {
        nextTick(() => console.log(self.$appName)); // 'Hello!'
    },

    created() {
        self = this;
    },
};
</script>

@Psidom's answer is better practice in my opinion, but, this is just another way.

Upvotes: 2

Boussadjra Brahim
Boussadjra Brahim

Reputation: 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) 
}

Upvotes: 28

akuiper
akuiper

Reputation: 215117

It seems you need provide / inject. In your App.vue:

import { provide } from 'vue';

export default {
  setup() {
    provide('appName', 'vue3')
  }
}

Or provide it with your app:

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

app.provide('appName', 'Vue3');

And then in any child component where you want to access this variable, inject it:

import { inject } from 'vue'

export default {
  setup() {
    const appName = inject('appName');
  }
}

Upvotes: 16

Related Questions