Export components individually

[walfly]

This plugin only registers 2 components, it doesn't provide any other additional features. It would be better to import these components where they are used instead of registering them globally using the vue.use syntax.

[RWave88]

@walfly is there any way to import it locally?

[jarvisniu]

Thank you, this is totally acceptable.

But when I build it, I found that the mixed export (default and named) has a big problem. The rollup says:

(!) Mixing named and default exports
https://rollupjs.org/guide/en/#output-exports
The following entry modules are using named and default exports together:
src/index.js
src/index.js

Consumers of your bundle will have to use chunk['default']
to access their default export, which may not be what you want.
Use `output.exports: 'named'` to disable this warning

And here has an explaining: https://github.com/rollup/rollup/issues/1961#issuecomment-423037881

So I changed it to this:

import VueZoomer from './vue-zoomer.vue'
import VueZoomerGallery from './vue-zoomer-gallery.vue'

export default {
  install (Vue) {
    Vue.component('VZoomer', VueZoomer)
    Vue.component('VZoomerGallery', VueZoomerGallery)
  },
  // for locally register
  Zoomer: VueZoomer,
  Gallery: VueZoomerGallery,
}

And use as:

<!-- page1.vue -->
<script>
import VueZoomer from 'vue-zoomer'

export default {
  components: {
    VZoomer: VueZoomer.Zoomer,
    VZoomerGallery: VueZoomer.Gallery,
  },
}
</script>

A little ugly, but without problem.

Maybe a better way is:

// lib.js
export { plugin, VueZoomer, VueZoomerGallery }
// globally usage
import { plugin } from 'vue-zoomer'
Vue.use(plugin)
// locally usage
import { VueZoomer, VueZoomerGallery } from 'vue-zoomer'

But this is not backwards compatible.

[jarvisniu]

Published at v0.3.10

[walfly]

Sounds great, Thanks!