From 3d8c893df9583d07dc5773684a0ddbf7972f0d78 Mon Sep 17 00:00:00 2001
From: Brandon Martel <brandonmartel@gmail.com>
Date: Sat, 2 Jun 2018 09:12:47 -0500
Subject: [PATCH] add vue decorator

---
 README.md    | 19 +++++++++++++++++++
 package.json |  3 +++
 src/vue.js   | 26 ++++++++++++++++++++++++++
 vue.js       |  1 +
 4 files changed, 49 insertions(+)
 create mode 100644 src/vue.js
 create mode 100644 vue.js

diff --git a/README.md b/README.md
index ec48db1..2c794b6 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,8 @@ import 'storybook-addon-figma/register'
 
 Link a Figma design to your story
 
+## With React
+
 ```jsx
 import React from 'react'
 import { storiesOf } from '@storybook/react'
@@ -38,6 +40,23 @@ storiesOf('Button')
   ))
 ```
 
+## With Vue
+
+```jsx
+import Vue from 'vue'
+import { storiesOf } from '@storybook/vue'
+import { WithFigma } from 'storybook-addon-figma/vue'
+
+storiesOf('Button')
+  .add('With Figma', () => ({
+    components: { WithFigma },
+    template: `
+      <with-figma url="https://www.figma.com/file/LbcvMJxDtshDmYtdyfJfkA72/Button-Primary">
+        <button>My Button</button>
+      </with-figma>
+    `
+  }))
+```
 
 
 ## Embed a different design on each story
diff --git a/package.json b/package.json
index 2b4d206..b418f98 100644
--- a/package.json
+++ b/package.json
@@ -32,5 +32,8 @@
     "babel-preset-react-app": "3.0.3",
     "react": "16.0.0",
     "react-dom": "16.0.0"
+  },
+  "peerDependencies": {
+    "vue": ">= 2.0.0"
   }
 }
diff --git a/src/vue.js b/src/vue.js
new file mode 100644
index 0000000..1ff4dc1
--- /dev/null
+++ b/src/vue.js
@@ -0,0 +1,26 @@
+import Vue from "vue";
+import addons from "@storybook/addons";
+import { EVENT_ID } from "./shared";
+
+export const WithFigma = Vue.component("with-figma", {
+  props: {
+    url: { type: String, required: true },
+    allowFullScreen: { type: Boolean, default: true },
+    embedHost: { type: String, default: "storybook" }
+  },
+  render(el) {
+    addons.getChannel().emit(EVENT_ID, {
+      url: this.url,
+      allowFullScreen: this.allowFullScreen,
+      embedHost: this.embedHost
+    });
+
+    try {
+      return this.$slots.default[0];
+    } catch (e) {
+      throw new Error("WithFigma can only render one child component.");
+    }
+
+    return null;
+  }
+});
diff --git a/vue.js b/vue.js
new file mode 100644
index 0000000..05ce2d6
--- /dev/null
+++ b/vue.js
@@ -0,0 +1 @@
+module.exports = require("./dist/vue");