diff --git a/src/SvgPanZoom.vue b/src/SvgPanZoom.vue
new file mode 100644
index 0000000..bf732f5
--- /dev/null
+++ b/src/SvgPanZoom.vue
@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <slot />
+    </div>
+</template>
+
+
+<script>
+import svg_pan_zoom from 'svg-pan-zoom';
+
+import props from './props';
+
+export default {
+    props,
+    mounted: function() {
+        let options = {};
+
+        Object.keys(props).filter( k => this[k] !== undefined ).forEach( k => options[k] = this[k] );
+        console.log(options);
+        svg_pan_zoom( this.$slots.default[0].elm , options );
+    },
+};
+
+</script>
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..e7ef74c
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,4 @@
+import SvgPanZoom from './SvgPanZoom.vue';
+
+export { SvgPanZoom };
+export default SvgPanZoom;
diff --git a/src/layers.stories.vue b/src/layers.stories.vue
index 7cf8acf..9ed745a 100644
--- a/src/layers.stories.vue
+++ b/src/layers.stories.vue
@@ -30,7 +30,7 @@
 
 
 <script>
-import SvgPanZoom from './index.vue';
+import SvgPanZoom from './index';
 
 export default {
     computed: {
diff --git a/src/index.vue b/src/props.js
similarity index 75%
rename from src/index.vue
rename to src/props.js
index f06a33f..401863c 100644
--- a/src/index.vue
+++ b/src/props.js
@@ -1,13 +1,4 @@
-<template>
-    <div>
-        <slot />
-    </div>
-</template>
-
-<script>
-import svg_pan_zoom from 'svg-pan-zoom';
-
-let props = {
+export default {
         'zoomEnabled':               { type: Boolean, default: true },
         'controlIconsEnabled':       { type: Boolean, default: false },
         'fit':                       { type: Boolean, default: true },
@@ -30,15 +21,3 @@ let props = {
         , customEventsHandler:   { }
         , eventsListenerElement: {  }
 };
-
-export default {
-    props,
-    mounted: function() {
-        let options = {};
-
-        Object.keys(props).filter( k => this[k] !== undefined ).forEach( k => options[k] = this[k] );
-        console.log(options);
-        svg_pan_zoom( this.$slots.default[0].elm , options );
-    },
-};
-</script>
diff --git a/src/stories.js b/src/stories.js
index 193ca70..d6a2590 100644
--- a/src/stories.js
+++ b/src/stories.js
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/vue';
 import { withKnobs, text, number, boolean } from '@storybook/addon-knobs';
-import SvgPanZoom from './index.vue';
+import SvgPanZoom from './index';
 
 import RawTiger from './RawTiger.vue';
 
diff --git a/src/thumbnail.stories.vue b/src/thumbnail.stories.vue
index 11952f7..d7c8322 100644
--- a/src/thumbnail.stories.vue
+++ b/src/thumbnail.stories.vue
@@ -11,7 +11,7 @@
 
 
 <script>
-import { SvgPanZoom, SvgPanZoomThumbnail } from './index.vue';
+import { SvgPanZoom, SvgPanZoomThumbnail } from './index';
 
 export default {
     components: {  SvgPanZoom, SvgPanZoomThumbnail },