add vue decorator

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

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"
   }
 }

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;
+  }
+});

vue.js

@@ -0,0 +1 @@
+module.exports = require("./dist/vue");