{"id":18773737,"url":"https://github.com/janumedia/vue-storybook-example","last_synced_at":"2025-07-14T16:04:53.510Z","repository":{"id":41782827,"uuid":"163707737","full_name":"janumedia/vue-storybook-example","owner":"janumedia","description":"Storybook for Vue example","archived":false,"fork":false,"pushed_at":"2023-03-04T15:01:52.000Z","size":2305,"stargazers_count":57,"open_issues_count":10,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-13T09:13:31.046Z","etag":null,"topics":["scss","storybook","support-scss","test-framework","ui-tests","vue","vue-cli","vue-router","vue-storybook","vuejs","webpack"],"latest_commit_sha":null,"homepage":"https://vue-storybook-example.netlify.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/janumedia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-01T01:57:07.000Z","updated_at":"2024-01-17T09:18:23.000Z","dependencies_parsed_at":"2024-11-07T19:37:42.757Z","dependency_job_id":"6859f6eb-1437-4747-8fde-d60943f68c16","html_url":"https://github.com/janumedia/vue-storybook-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/janumedia/vue-storybook-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janumedia%2Fvue-storybook-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janumedia%2Fvue-storybook-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janumedia%2Fvue-storybook-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janumedia%2Fvue-storybook-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/janumedia","download_url":"https://codeload.github.com/janumedia/vue-storybook-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janumedia%2Fvue-storybook-example/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265314143,"owners_count":23745201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["scss","storybook","support-scss","test-framework","ui-tests","vue","vue-cli","vue-router","vue-storybook","vuejs","webpack"],"created_at":"2024-11-07T19:35:17.807Z","updated_at":"2025-07-14T16:04:53.086Z","avatar_url":"https://github.com/janumedia.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# vue-storybook-example\nStorybook.js for Vue example\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/3bbc08dc-4fda-4263-b558-cd4acfa94825/deploy-status)](https://app.netlify.com/sites/vue-storybook-example/deploys)\n\n[Live Demo](https://vue-storybook-example.netlify.com)\n\n## Step by step setup\n\n\u003e This Storybok example is based on Vue CLI 3.0, some libraries required by Storybook are already installed by Vue CLI except  `babel-preset-vue` that you should install it manually.\n\n 1. Create Vue project using Vue CLI\n\t ```\n\t vue create your-app\n\t cd your-app\n\t ```\n 2. Add `@storybook/vue`\n\t ```\n\t yarn add --dev @storybook/vue\n\t ```\n 3. Add `babel-preset-vue`\n\t ```\n\t yarn add --dev babel-preset-vue\n\t ```\n 4. Add Storybook run and build scripts to your `package.json`\n\t ```\n\t{\n\t\t\"scripts\": {\n\t\t\t\"storybook\": \"start-storybook -p 9001 -c .storybook -s public\",\n\t\t\t\"storybook:build\": \"build-storybook -c .storybook -o .out -s public\"\n\t\t}\n\t} \n\t```\n\t \u003e The **-p** command refer to the port number where the Storybook will be run.  \n\t \u003e The **-c** command refer to the config directory.  \n\t \u003e The **-o** command refer to directory where to store built files.  \n\t \u003e The **-s** command refer to directory to load static / public files\n 5. Create `.storybook` directory as the config directory\n 6. Create `.storybook/config.js` as config file\n\t ```\n\t import { configure } from '@storybook/vue'\n\t import Vue from 'vue'\n\t \n\t // import your vue plugins\n\t import Vuex from 'vuex'\n\t \n\t // import your custom components\n\t import Button from '../src/stories/Button.vue'\n\t \n\t // install your vue plugins\n\t Vue.use(Vuex);\n\t // register your custom components\n\t Vue.component('my-button', Button);\n\t function loadStories() {\n\t\t // you can require as many stories as you need\n\t\t require('../src/stories');\n\t }\n\t configure(loadStories, module);\n\t ```\n\t \u003e **Note**: All custom components and Vue plugins should be registered before calling  `configure()`.\n 7. Create `../src/stories` directory as the place your Storybook stories\n 8. Write your stories inside `../src/stories/index.js`\n\t ```\n\t import Vue from 'vue'\n\t import { storiesOf } from '@storybook/vue'\n\t import Button from './Button.vue'\n\t storiesOf('Button', module)\n\t .add('Button as a template', () =\u003e (\n\t\t '\u003cmy-button\u003ebutton as template\u003c/my-button\u003e'\n\t )\n\t add('Button as a component', () =\u003e({\n\t\t components: {'the-button': Button},\n\t\t template: '\u003cthe-button\u003ebutton as component\u003c/the-button\u003e'\n\t }));\n\t ```\n 9. Write your custom component, in this case `../src/stories/Button.vue`\n\t ```\n\t \u003ctemplate\u003e\n\t\t \u003cbutton\u003e\u003cslot/\u003e\u003c/button\u003e\n\t \u003c/template\u003e\n\t ``` \n10. Run your Storybook\n\t ```\n\t yarn storybook\n\t ```\n11. To build your Storybook\n\t ```\n\t yarn storybook:build\n\t ```\n\t \u003e `.out` directory will be created with built files and ready to upload to your hosting server.\n\n## Add Support to SCSS\n\nBy default Storybook not support SCSS even project the created using Vue CLI support SCSS or other preprocesor CSS. This is because Storybook use different Webpack. You must extend Storybook Webpack's config by creating `webpack.config.js` inside `.storybook` directory and define SCSS or your other style loader.\n```\n//.storybook/webpack.config.js\nconst path = require(\"path\");\n\nmodule.exports = (baseConfig, env, defaultConfig) =\u003e {\n    defaultConfig.module.rules.push({\n        test: /\\.scss$/,\n        loaders: [\"style-loader\", \"css-loader\", \"sass-loader\"],\n        include: path.resolve(__dirname, \"../\")\n    });\n    return defaultConfig;\n};\n```\n\n## Resolve URL (Path) Alias\n\nWith Vue CLI each time URL started with `@` it will aliases to `\u003cprojectRoot\u003e/src`. But since Storybook use different Webpack this URL alias will not work and your existing Vue components will not work. To fix this issue you should define URL alias setup manually by extend Storybook webpack's config.\n```\n//.storybook/webpack.config.js\nconst path = require(\"path\");\n\nmodule.exports = (baseConfig, env, defaultConfig) =\u003e {\n    defaultConfig.resolve.alias = {\n        ...defaultConfig.resolve.alias,\n        \"@\": path.resolve(__dirname, \"../src\")\n    };\n    return defaultConfig;\n};\n```\n## Vue-Router\n\nTo enable `vue-router` you can implement `addDecorator` and use [storybook-vue-router](https://github.com/gvaldambrini/storybook-router/tree/master/packages/vue) with the following steps:\n1. Add `storybook-vue-router`\n   ```\n   yarn add -D storybook-vue-router\n   ```\n2. Add `@storybook/addon-actions` as `storybook-vue-router` require this addons.  \n   \u003e**Note:** If you're already installed it you can jump to next step\n   ```\n   yarn add -D @storybook/addon-actions\n   ```\n3. Use `storybook-vue-router` as decorator in your stories\n   ```\n   // .src/stories/index.js\n   \n   import { storiesOf } from '@storybook/vue'\n   import StoryRouter from 'storybook-vue-router'\n   \n   import App from '@/App'\n   \n   //import your router\n   import router from '@/router'\n   \n   storiesOf('App', module)\n    .addDecorator(StoryRouter({}, router.options))\n    .add('app', () =\u003e ({\n        render: h =\u003e h(App)\n    }));\n   \n   ```\n4. Read [storybook-vue-router-guide](https://github.com/gvaldambrini/storybook-router/blob/master/packages/vue/README.md)\n\n## Further Reading\n\n[Storybook Quick Start Guide](https://storybook.js.org/basics/quick-start-guide/)\n\n[Storybook for Vue](https://storybook.js.org/basics/guide-vue/)\n\n[Writing Stories](https://storybook.js.org/basics/writing-stories/)\n\n[Custom Webpack Config](https://storybook.js.org/configurations/custom-webpack-config/)\n\n[Using Addons](https://storybook.js.org/addons/using-addons/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanumedia%2Fvue-storybook-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjanumedia%2Fvue-storybook-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanumedia%2Fvue-storybook-example/lists"}