How to access imported vue component's instance outside main vue component?

Question

I am importing this simple Vue component in my main.js file (NativeScript-Vue app)

App.vue

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!"/>
    <StackLayout>
      <Label class="message" :text="msg" col="0" row="0" @tap="log"/>
    </StackLayout>
  </Page>
</template>


<script>

export default {
  data() {
    return {
      msg: "Hello World!"
    }
  },
  methods: {
    log() {
      console.log("clicked")
    }
  }
}
</script>

main.js

How can I access App.vue's instance, used in main.js outside the main Vue component. Like below I am initializing firebase before calling the start() method on the main Vue component

import Vue from 'nativescript-vue'
import App from './components/App'
import * as firebase from 'nativescript-plugin-firebase'

/* how to access App component's instance here */
firebase.init().then(() => { 
    console.log('firebase initialized') 
    /* how to call log() or change msg's value here */
})

new Vue({
   render: h => h('frame', [h(App)])
}).$start()

Can I somehow, access the imported components data and change the value of msg on initializing firebase ?

Thomas Thomas · Accepted Answer · 2019-01-11T10:18:02

Try it like this:

import Vue from 'nativescript-vue'
import App from './components/App'
import * as firebase from 'nativescript-plugin-firebase'

/* how to access App component's instance here */
firebase.init().then(() => { 
    console.log('firebase initialized') 
    /* how to call log() or change msg's value here */
    myApp.log()
})

const myApp = new Vue({
   render: h => h('frame', [h(App)])
}).$start()

But it is untested.

How to access imported vue component's instance outside main vue component?

1 Answers