How do I access Vue instance inside a js file in Vue3?

Question

In Vue2, I was able to access my Vue instance to make use of components registered with 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 as I have already registered it with Vue in my main.js. However, in Vue3 I'm unable to use the toasted package as I'm unable to access the Vue instance inside a js file.

Need help on how to access Vue instance('this') inside a js file.

please share the to the package repository

Boussadjra Brahim
– Boussadjra Brahim

2021-08-03 08:18:39 +00:00
Commented Aug 3, 2021 at 8:18 — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 3, 2021 at 8:18

Kick Buttowski · Accepted Answer · 2021-11-16 03:38:58Z

8

After a day of searching, I was able to access the toasted component from the vue instance inside a js file.

First, we would have to export the app instance to be able to read it in a js file

main.js

export const app = createApp({
   render() {
     return h(AppWrapper);
   },
});

Next, we would have to register our component in our globalProperties of our app's instance.

app.config.globalProperties.$toast = toast;

We can now import the app instance in our js file and access toast component

test.js

import { app } from '@/main.js'

app.config.globalProperties.$toast('Toast working fine', {
    type: 'success',
    duration: 2000,
  })

Hope this helps someone out. Please let me know if there are other/better ways. Thank you

edited Nov 16, 2021 at 3:38

Kick Buttowski

6,73713 gold badges39 silver badges61 bronze badges

answered Aug 6, 2021 at 13:19

JonesGladston

2951 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hoov Over a year ago

This should work, but is not the most clean solution, because app.config indicates its purpose is for configuration settings, not for state, which can change during app runtime. It would be better to use the provide/inject mechanism.

walox Over a year ago

Uncaught ReferenceError: Cannot access 'App' before initialization

RonaldT · Accepted Answer · 2021-08-04 19:10:50Z

4

// Vue 3 Composition API

    <script>
      import { getCurrentInstance } from 'vue';
    
      export default {
        setup() {
          const _instance = getCurrentInstance();
          const vueInstance = _instance.appContext;
        },
      };
    </script>

It's not exactly the way as in Vue2, but this will probably expose what you are looking for.

If you want to make a package globally available in Vue3 you probably need to add the following code to a 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);

With this you are able to get the toasted instance in the options api with: this.$toasted

And with the composition api: const { $toasted } = _instance.appContext.app.config.globalProperties;

And in another plugin with: constructor(app) { app.config.globalProperties; }

answered Aug 4, 2021 at 19:10

RonaldT

3743 silver badges12 bronze badges

3 Comments

JonesGladston Over a year ago

Hey thanks for answering, but this concept woudn't work a js file right?? It works only on a Vue component. Please correct me if im wrong

Hwa Over a year ago

can this work inside a js file? For example, how can I access a $log variable in a js file encapsulated the axios requests? The API refrence said that getCurrentInstance only works during setup or Lifecycle Hooks.

Mohammad Atif Aftab Over a year ago

But he asked for JS file not for vue file

The Jared Wilcurt · Accepted Answer · 2023-08-11 15:08:20Z

0

2023 Update

This works in Vue 3.3.4.

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">{{ myValue }}</div>
<script>
const app = Vue.createApp({
  data: function () {
    return {
      myValue: 'a'
    };
  },
  methods: {
    setMyValue: function (value) {
      this.myValue = value;
    }
  }
});
app.mount('#app');

setTimeout(function () {
  app._instance.ctx.$data.myValue = 'b';
}, 1000);

setTimeout(function () {
  app._instance.ctx.setMyValue('c');
}, 2000)
</script>

JSFiddle of above

answered Aug 11, 2023 at 15:08

The Jared Wilcurt

3561 silver badge8 bronze badges

1 Comment

Harrison Over a year ago

Code-only answers should be updated to explain how the code resolves the question, further guidance can be found in the Help Center

Huy Duy · Accepted Answer · 2021-08-03 12:34:43Z

-2

You can use provider/inject.

For example if you want to use axios across my components, provide axios in your main.js

import { createApp } from "vue";
import App from "./App.vue";
import axios from "axios";

const app = createApp(App);

app.provide("http", axios);

app.mount("#app");

Then in SFC component you could access by 2 ways:

// Composition API
<script>
import { inject } from 'vue'

export default {
  setup() {
    const http = inject("http");
    http.get("https://jsonplaceholder.typicode.com/todos/1").then((response) => {
      console.log(response.data);
    });
  }
}
</script>

// Vue 2 options API
<script>
export default {
  inject: ["http"],
}
</script>

Original answer here.

edited Aug 3, 2021 at 12:34

answered Aug 3, 2021 at 11:37

Huy Duy

8628 silver badges11 bronze badges

2 Comments

padaleiana Over a year ago

Please write a brief summary of the content of the link you provide (even if it is a SO answer). Remember that such content may no longer be available later, making this answer invalid.

JonesGladston Over a year ago

As I mentioned, I need to access the Vue instance inside a js file.

Collectives™ on Stack Overflow

How do I access Vue instance inside a js file in Vue3?

4 Answers 4

2 Comments

3 Comments

2023 Update

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

2023 Update

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related