In Vue2, I am able to access my Vue instance to use components registered in Vue.
test.js
import Vue from 'vue'
export function renderLogin () {
Vue.toasted.show('Please login again', { type: 'error', duration: 2000 })
}
In the above code, I am able to access the toasted package because I have registered it with Vue in main.js. However, in Vue3, I cannot use the toasted package because I cannot access the Vue instance inside the js file.
Need help on how to access the Vue instance ('this') inside the js file.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
// Vue 3 composition API
This is not exactly the same way as in Vue2, but this might expose what you are looking for.
If you want a package to be globally available in Vue3, you may need to add the following code to the plugin:
//* This will help for accessing the toasted instance in other files (plugins) app.config.globalProperties.$toasted = toasted; //* This will expose the toasted instance in components with this.$toasted app.provide('$toasted', toasted);This way you can get the toasted instance using the following command in the options api:
this.$toastedUse the composition API:
const { $toasted } = _instance.appContext.app.config.globalProperties;In another plugin:
constructor(app) { app.config.globalProperties; }After a day of searching, I was able to access the toasted component from the vue instance inside the js file.
First we have to export the application instance to read it in js file
main.js
export const app = createApp({ render() { return h(AppWrapper); }, });Next, we must register our component in the globalProperties of the application instance.
We can now import the application instance in the js file and access the toast component
test.js
import { app } from '@/main.js' app.config.globalProperties.$toast('Toast working fine', { type: 'success', duration: 2000, })Hope this helps someone else. If there is any other/better way, please let me know. Thanks