How to get the this instance in vue 3?

Question

In vue 2+ I can easily get the instance of this as a result I can write something like this,

// main.js
app.use(ElMessage)

// home.vue
this.$message({
  showClose: true,
  message: 'Success Message',
  type: 'success',
})

What should I do for vue 3 as,

Inside setup(), this won't be a reference to the current active instance Since setup() is called before other component options are resolved, this inside setup() will behave quite differently from this in other options. This might cause confusions when using setup() along other Options API. - vue 3 doc.

Answer 1

Vue 3 provides getCurrentInstance() inside the setup() hook. That instance allows access to global properties (installed from plugins) via appContext.config.globalProperties:

import { getCurrentInstance } from "vue";

export default {
  setup() {
    const globals = getCurrentInstance().appContext.config.globalProperties;
    return {
      sayHi() {
        globals.$message({ message: "hello world" });
      },
    };
  },
};

demo