Styjun

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.

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

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'