From e52a3d3c73d14f1e498dfe55d57892634bec62ae Mon Sep 17 00:00:00 2001
From: Yao Ding <yaodingyd@gmail.com>
Date: Thu, 4 Oct 2018 10:33:40 -0400
Subject: [PATCH 1/2]  support only string component for vue

---
 app/vue/src/client/preview/render.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/vue/src/client/preview/render.js b/app/vue/src/client/preview/render.js
index f6a4dbf09183..cb5ff06ced93 100644
--- a/app/vue/src/client/preview/render.js
+++ b/app/vue/src/client/preview/render.js
@@ -20,6 +20,10 @@ export default function render({
   Vue.config.errorHandler = showException;
 
   const component = story();
+  
+  if (typeof component === 'string') {
+    component = { template: component };
+  }
 
   if (!component) {
     showError({

From c93bcaf909ec8861d2d9a6b2bfe1ffa867523294 Mon Sep 17 00:00:00 2001
From: Yao Ding <yao.ding@compass.com>
Date: Mon, 8 Oct 2018 14:41:51 -0400
Subject: [PATCH 2/2] fix string only template for vue

---
 app/vue/src/client/preview/index.js                    |  7 ++++++-
 app/vue/src/client/preview/render.js                   |  4 ----
 .../__snapshots__/core-template.stories.storyshot      | 10 ++++++++++
 .../src/stories/core-template.stories.js               |  6 ++++++
 4 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot
 create mode 100644 examples/vue-kitchen-sink/src/stories/core-template.stories.js

diff --git a/app/vue/src/client/preview/index.js b/app/vue/src/client/preview/index.js
index d0a3ba130b6a..b859c3dd1c82 100644
--- a/app/vue/src/client/preview/index.js
+++ b/app/vue/src/client/preview/index.js
@@ -13,7 +13,12 @@ const decorateStory = (getStory, decorators) =>
   decorators.reduce(
     (decorated, decorator) => context => {
       const story = () => decorated(context);
-      const decoratedStory = decorator(story, context);
+      let decoratedStory = decorator(story, context);
+
+      if (typeof decoratedStory === 'string') {
+        decoratedStory = { template: decoratedStory };
+      }
+
       decoratedStory.components = decoratedStory.components || {};
       decoratedStory.components.story = createWrapperComponent(story());
       return decoratedStory;
diff --git a/app/vue/src/client/preview/render.js b/app/vue/src/client/preview/render.js
index cb5ff06ced93..f6a4dbf09183 100644
--- a/app/vue/src/client/preview/render.js
+++ b/app/vue/src/client/preview/render.js
@@ -20,10 +20,6 @@ export default function render({
   Vue.config.errorHandler = showException;
 
   const component = story();
-  
-  if (typeof component === 'string') {
-    component = { template: component };
-  }
 
   if (!component) {
     showError({
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot
new file mode 100644
index 000000000000..7f9ee9188fc4
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Core|Template string only 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  A Button with square edges!
+</button>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/core-template.stories.js b/examples/vue-kitchen-sink/src/stories/core-template.stories.js
new file mode 100644
index 000000000000..8acb4bd11b06
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/core-template.stories.js
@@ -0,0 +1,6 @@
+import { storiesOf } from '@storybook/vue';
+
+storiesOf('Core|Template', module).add(
+  'string only',
+  () => '<my-button :rounded="false">A Button with square edges</my-button>'
+);