From 317a4e19943e054f332b00f78e3dc4bb48f46f33 Mon Sep 17 00:00:00 2001
From: jfgreffier <jfgreffier@users.noreply.github.com>
Date: Fri, 9 Nov 2018 11:13:05 +0100
Subject: [PATCH] knobs addon Vue.js example

---
 addons/knobs/README.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/addons/knobs/README.md b/addons/knobs/README.md
index a0a20953f73..a3a29311c05 100644
--- a/addons/knobs/README.md
+++ b/addons/knobs/README.md
@@ -55,6 +55,39 @@ stories.add('as dynamic variables', () => {
 });
 ```
 
+### With Vue.js
+```js
+import { storiesOf } from '@storybook/vue';
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
+
+import MyButton from './Button.vue';
+
+const stories = storiesOf('Storybook Knobs', module);
+
+// Add the `withKnobs` decorator to add knobs support to your stories.
+// You can also configure `withKnobs` as a global decorator.
+stories.addDecorator(withKnobs);
+
+// Knobs for Vue props
+// Knobs for Vue props
+stories.add('with a button', () => ({
+  components: { MyButton },
+  template:
+    `<button disabled="${boolean('Disabled', false)}" >
+      ${text('Label', 'Hello Storybook')}
+    </button>`
+}));
+
+// Knobs as dynamic variables.
+stories.add('as dynamic variables', () => {
+  const name = text('Name', 'Arunoda Susiripala');
+  const age = number('Age', 89);
+
+  const content = `I am ${name} and I'm ${age} years old.`;
+  return `<div>${content}</div>`;
+});
+```
+
 ### With Angular
 ```js
 import { storiesOf } from '@storybook/angular';