diff --git a/lib/cli/generators/SFC_VUE/template/.storybook/config.js b/lib/cli/generators/SFC_VUE/template/.storybook/config.js
index dda9c86692b..3b39b035c7b 100644
--- a/lib/cli/generators/SFC_VUE/template/.storybook/config.js
+++ b/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);
diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/Button.stories.js b/lib/cli/generators/SFC_VUE/template/src/stories/Button.stories.js
new file mode 100644
index 00000000000..ca61ba31657
--- /dev/null
+++ b/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') },
+});
diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.stories.js b/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.stories.js
new file mode 100644
index 00000000000..2baaf043384
--- /dev/null
+++ b/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',
+};
diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/index.stories.js b/lib/cli/generators/SFC_VUE/template/src/stories/index.stories.js
deleted file mode 100644
index 424a03c0e20..00000000000
--- a/lib/cli/generators/SFC_VUE/template/src/stories/index.stories.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* eslint-disable react/react-in-jsx-scope */
-
-import { storiesOf } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import MyButton from './MyButton.vue';
-import Welcome from './Welcome.vue';
-
-storiesOf('Welcome', module).add('to Storybook', () => ({
-  components: { Welcome },
-  template: '<welcome :showApp="action" />',
-  methods: { action: linkTo('Button') },
-}));
-
-storiesOf('Button', module)
-  .add('with text', () => ({
-    components: { MyButton },
-    template: '<my-button @click="action">Hello Button</my-button>',
-    methods: { action: action('clicked') },
-  }))
-  .add('with JSX', () => ({
-    components: { MyButton },
-    render() {
-      return <my-button onClick={this.action}>With JSX</my-button>;
-    },
-    methods: { action: linkTo('clicked') },
-  }))
-  .add('with some emoji', () => ({
-    components: { MyButton },
-    template:
-      '<my-button @click="action"><span role="img" aria-label="so cool">😀 😎 👍 💯</span></my-button>',
-    methods: { action: action('clicked') },
-  }));