CLI: update sb init to module format for Vue

lib/cli/generators/SFC_VUE/template/.storybook/config.js

@@ -1,9 +1,4 @@
-import { configure } from '@storybook/vue';
+import { load } from '@storybook/vue';
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../src/stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);

lib/cli/generators/SFC_VUE/template/src/stories/Button.stories.js

@@ -0,0 +1,29 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import MyButton from './MyButton.vue';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Hello Button</my-button>',
+  methods: { action: action('clicked') },
+});
+
+export const jsx = () => ({
+  components: { MyButton },
+  render() {
+    return <my-button onClick={this.action}>With JSX</my-button>;
+  },
+  methods: { action: linkTo('clicked') },
+});
+
+export const emoji = () => ({
+  components: { MyButton },
+  template:
+    '<my-button @click="action"><span role="img" aria-label="so cool">😀 😎 👍 💯</span></my-button>',
+  methods: { action: action('clicked') },
+});

lib/cli/generators/SFC_VUE/template/src/stories/Welcome.stories.js

@@ -0,0 +1,17 @@
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from './Welcome.vue';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => ({
+  components: { Welcome },
+  template: '<welcome :showApp="action" />',
+  methods: { action: linkTo('Button') },
+});
+
+toStorybook.story = {
+  name: 'to Storybook',
+};

lib/cli/generators/VUE/template/.storybook/config.js

@@ -1,9 +1,4 @@
-import { configure } from '@storybook/vue';
+import { load } from '@storybook/vue';
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/VUE/template/stories/Button.stories.js

@@ -0,0 +1,28 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import MyButton from './MyButton';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Hello Button</my-button>',
+  methods: { action: action('clicked') },
+});
+
+export const jsx = () => ({
+  components: { MyButton },
+  render(h) {
+    return <my-button onClick={this.action}>With JSX</my-button>;
+  },
+  methods: { action: linkTo('clicked') },
+});
+
+export const emoji = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
+  methods: { action: action('clicked') },
+});

lib/cli/generators/VUE/template/stories/Welcome.stories.js

@@ -0,0 +1,17 @@
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from './Welcome';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => ({
+  components: { Welcome },
+  template: '<welcome :showApp="action" />',
+  methods: { action: linkTo('Button') },
+});
+
+toStorybook.story = {
+  name: 'to Storybook',
+};