diff --git a/src/single.stories.vue b/src/single.stories.vue
new file mode 100644
index 0000000..3d660f8
--- /dev/null
+++ b/src/single.stories.vue
@@ -0,0 +1,19 @@
+<template>
+    <SvgPanZoom style="width: 500px; height: 500px; border:1px solid black;"
+        :zoomEnabled="true"
+        :controlIconsEnabled="true"
+        :fit="false"
+        :center="true"
+    >
+        <RawTiger />
+    </SvgPanZoom>
+</template>
+
+<script>
+import RawTiger from './RawTiger.vue';
+import SvgPanZoom from './index';
+
+export default {
+    components: {  SvgPanZoom, RawTiger },
+}
+</script>
diff --git a/src/stories.js b/src/stories.js
index d6a2590..f81dcb8 100644
--- a/src/stories.js
+++ b/src/stories.js
@@ -6,32 +6,13 @@ import RawTiger from './RawTiger.vue';
 
 import LayerStory      from './layers.stories.vue';
 import ThumbnailStory  from './thumbnail.stories.vue';
+import SingleStory      from './single.stories.vue';
 
 const stories = storiesOf('SvgPanZoom', module)
 .addDecorator( withKnobs )
-.add('single inline SVG', () => {
-    return {
-        components: {  SvgPanZoom, RawTiger },
-        template: `
-            <SvgPanZoom style="width: 500px; height: 500px; border:1px solid black;"
-                :zoomEnabled="true"
-                :controlIconsEnabled="true"
-                :fit="false"
-                :center="true"
-            >
-                <RawTiger />
-            </SvgPanZoom>`
-    }}
+.add('single inline SVG', 
+    () => SingleStory
 )
-.add( 'layers', () => {
-    return {
-        components: { LayerStory },
-        template: '<div><LayerStory /></div>'
-    };
-})
-.add( 'thumbnail', () => {
-    return {
-        components: { ThumbnailStory },
-        template: '<div><ThumbnailStory /></div>',
-    };
-});
+.add( 'layers', () => LayerStory )
+.add( 'thumbnail', () => ThumbnailStory )
+;