diff --git a/examples/storybook/.storybook/addons.js b/examples/storybook/.storybook/addons.js index ebf8190d38..b4ae4fc536 100644 --- a/examples/storybook/.storybook/addons.js +++ b/examples/storybook/.storybook/addons.js @@ -1,5 +1,5 @@ -import '@storybook/addon-knobs/register'; -import '@storybook/addon-actions/register'; -import '@storybook/addon-links/register'; -import '@storybook/addon-notes/register'; -import '@storybook/addon-viewport/register'; \ No newline at end of file +import '@storybook/addon-knobs/register' +import '@storybook/addon-actions/register' +import '@storybook/addon-links/register' +import '@storybook/addon-notes/register' +import '@storybook/addon-viewport/register' diff --git a/examples/storybook/.storybook/config.js b/examples/storybook/.storybook/config.js index 208f9b98c5..f5d19b9f05 100644 --- a/examples/storybook/.storybook/config.js +++ b/examples/storybook/.storybook/config.js @@ -1,24 +1,21 @@ -import "vuetify/dist/vuetify.css"; +import 'vuetify/dist/vuetify.css' -import { configure } from "@storybook/vue"; -import Vue from "vue"; -import Vuex from "vuex"; -import Vuetify from "vuetify"; -import MyButton from "../components/Button.vue"; +import { configure } from '@storybook/vue' +import Vue from 'vue' +import Vuex from 'vuex' +import Vuetify from 'vuetify' +import MyButton from '../components/Button.vue' -Vue.use(Vuex); -Vue.use(Vuetify); +Vue.use(Vuex) +Vue.use(Vuetify) -Vue.component("my-button", MyButton); +Vue.component('my-button', MyButton) -//function loadStories() { -// require("../src/stories"); -//} +// Automatically import all files ending in *.stories.js +const req = require.context('../stories', true, /.story.js$/) -// automatically import all files ending in *.stories.js -const req = require.context('../stories', true, /.story.js$/); function loadStories() { - req.keys().forEach((filename) => req(filename)); + req.keys().forEach((filename) => req(filename)) } -configure(loadStories, module); +configure(loadStories, module) diff --git a/examples/storybook/.storybook/webpack.config.js b/examples/storybook/.storybook/webpack.config.js index b113a4814d..47c6ed8720 100644 --- a/examples/storybook/.storybook/webpack.config.js +++ b/examples/storybook/.storybook/webpack.config.js @@ -3,13 +3,13 @@ const path = require('path') const nxtConf = require('../nuxt.config') module.exports = (sBaseConfig, configType, defaultConfig) => { + const srcDir = `../${nxtConf.srcDir||''}` + const rootDir = `../${nxtConf.rootDir||''}` - const srcDir = `../${nxtConf.srcDir||''}` - const rootDir = `../${nxtConf.rootDir||''}` - Object.assign(defaultConfig.resolve.alias, { - '~~': path.resolve(__dirname, rootDir), - '~': path.resolve(__dirname, srcDir) - }) + Object.assign(defaultConfig.resolve.alias, { + '~~': path.resolve(__dirname, rootDir), + '~': path.resolve(__dirname, srcDir) + }) - return defaultConfig -} \ No newline at end of file + return defaultConfig +} diff --git a/examples/storybook/README.md b/examples/storybook/README.md index 4081ca95ea..5310842148 100644 --- a/examples/storybook/README.md +++ b/examples/storybook/README.md @@ -8,3 +8,17 @@ Deo showcasing [Storybook](https://storybook.js.org/) usage with Nuxt.js, [Vueti * contains storybase.js with helper classes * integrates most of addons * real life examples with Vuetify and Vue-Charts + +### Usage + +Start the example o [http://localhost:3000](http://localhost:3000): + +```bash +npm run dev +``` + +Run Storybook: + +```bash +npm run storybook +``` diff --git a/examples/storybook/components/Button.vue b/examples/storybook/components/Button.vue index a9e30cdc5b..cc12291546 100644 --- a/examples/storybook/components/Button.vue +++ b/examples/storybook/components/Button.vue @@ -20,11 +20,10 @@ export default { .rounded { border-radius: 10px; } - .wr-button { border: 3px solid; padding: 10px 20px; background-color: white; outline: none; } - \ No newline at end of file + diff --git a/examples/storybook/components/Layout.vue b/examples/storybook/components/Layout.vue index b467f0643a..77f66fd093 100644 --- a/examples/storybook/components/Layout.vue +++ b/examples/storybook/components/Layout.vue @@ -66,7 +66,6 @@