How do you access exported vm (main vue instance) object from a component?

Question

If I start my vue instance from a main.js file

 //main.js
var vm = new Vue({
  el: '#app',
  render: h => h(App),
  router,
  data: {       
  }

});

export {
  vm
}

app.vue itself is a router view.

<template>
  <router-view></router-view>
</template>

<script>
  export default {}
</script>

So lets say one of the components that gets loaded in the router needs access to vm? I've gotten as far as to do this in the component:

import vm from '../main.js'

It seems to find the main.js file. But how do I then access vm? An example of a problem is when I use vue-lazyload(https://github.com/hilongjw/vue-lazyload) and need to access vm like I try here:

<template>
   <div class="hero-unit-bg" v-lazy:background-image="imgUrl" >
  </div>
</template>

<script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
import vm from '../main.js'

Vue.use(VueLazyload)
vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
  console.log(el, src)
})
export default {
  name: 'HeroUnit',
  data () {
    return {
      imgUrl: 'img/hero-unit-bg.png' // String
    }
  },
    methods: {
    },
  }
}
</script>

Console shows vm.$Lazyload as undefined. So I don't think I'm importing vm properly. Am I missing something? Thank you.

Answer 1

If you are exporting like this:

export { vm }

then you need to import it like this:

import { vm } from './module.js'

For a default export, it would work like this:

export default vm

import vm from './module.js'

Answer 2

You'd likely create a circular dependency by importing main.js into a component. You actually don't need to reference the root instance, as the code Vue.use(VueLazyLoad) makes the plugin accessible from any component method via this.$LazyLoad.

For example, you could setup your code as follows:

main.js:

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

App.vue

export default {
  ...
  mounted() {
    this.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
      console.log(el, src)
    })
  }
}

MyComponent.vue

<template>
  <div v-lazy-container="{ selector: 'img' }">
    <img data-src="//placekitten.com/200/200">
    <img data-src="//placekitten.com/200/201">
    <img data-src="//placekitten.com/200/202">  
  </div>
</template>

demo