How to use global variables inside the setup Vuetify 3

Question

Im using the vue 3 setup and I want to access global variable vuetify that I use. I can see it in the config.globalVariable but I cant use it in setup.

{_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …}
component: ƒ component(name, component)
config: Object
compilerOptions: (...)
errorHandler: undefined
globalProperties:
$vuetify: {defaults: {…}}
$messageSystem: {addMessage: ƒ}
__proto__: Object
isNativeTag: (tag) => {…}
...

as you can see I see the $vuetify, but on the setup I cant access it.

    setup() {
       ...
       this.$vuetify.theme.dark = true; 
       ...

Is this how I access a global variable?

The Error I get: Cannot read property '$vuetify' of undefined

user_8172857 · Answer

You cannot get access to this inside the setup hook but you can use getCurrentInstance to get the app instance which contains the config :

import { getCurrentInstance,onMounted } from 'vue'

export default {
  setup() {
    const internalInstance = getCurrentInstance()

    onMounted(()=>{
      nternalInstance.appContext.config.globalProperties.$vuetify.theme.dark=true
   })
  }

How to use global variables inside the setup Vuetify 3

1 Answers