/ Miscellaneous

Vue project template for authoring component and their use case

Vue project template for authoring component and their use case


This template is to help authoring Vue component with it's use case in story-scenario (storybook) format.

vue init DrSensor/vue-authoring-template

In case you need to convince your Lead Dev to give you permission open-sourcing your work :

"Authoring component and publish it to npm for later use can help reduce complexity by delegating the work of finding bug and adding feature of big/long-running project to the community"


  1. There is a time when developer involved in a project then build component to solve specific problem 😎
  2. One day this developer happen to do the same thing again in different project with slight alteration 😏
  3. Then doing it again, and again, and again 😫
  4. Now this developer have build many component with the same topic πŸ˜‚
  5. So, why not publish it as a single component with that one topic in mind to npm? 😲
  6. However, the component must be showcased in mvce style to make it easy to understand and maintainable πŸ˜–
  7. As the time passed, he/she is to lazy to do that because no template/config/cli/whatever for authoring the component in that way :poop:


  • Write your storybook story-scenario (a.k.a use case) in .vue single-file-component format, not .js or .jsx
  • Option to generate circleci config to:
    • publish vue component to npm and unpkg (need to git push --tags)
    • deploy storybook page to surge.sh
    • evaluate pull-requests and temporarily deploy storybook page to <name><#PR_number>.surge.sh (auto teardown when PR is merged)
  • Choose pre-installed and configured storybook addon:
  • Order the story and scenario alphabetically or manually re-order using Array|Object in src/stories/config.js
  • Auto generate README.md


vue init DrSensor/vue-authoring-template

After that, you can:

  • start in development mode
npm run dev # or
yarn dev
npm run deploy # or
yarn deploy
# see https://docs.npmjs.com/getting-started/semantic-versioning#semver-for-publishers
npm version [patch|minor|major]
npm publish
  • build vue component
# the output will be in dist/
npm run build:component # or
yarn build:component
  • build the storybook page
# the output will be in .storybook/dist/
npm run build:storybook # or
yarn build:storybook

Project Structure

β”œβ”€β”€ package.json
β”œβ”€β”€ .bilirc                 // choose and configure the component you want to package in here
β”œβ”€β”€ .editorconfig
β”œβ”€β”€ .gitignore
β”œβ”€β”€ .circleci
β”‚   └── config.yml
β”œβ”€β”€ .storybook              // storybook related config
β”‚   β”œβ”€β”€ addons.js
β”‚   β”œβ”€β”€ config.js
β”‚   └── webpack.config.js
└── src
    β”œβ”€β”€ components              // place 1 or more components to author here
    β”‚   └── HelloWorld.vue
    β”œβ”€β”€ mixins                  // if needed, reduce complexity by separating any long code as mixins
    β”‚   β”œβ”€β”€ mix1.js
    β”‚   └── mix2.js
    └── stories                 // use-case/usage of the component written in story-scenario analogy
        β”œβ”€β”€ Story1
        β”‚   └── Scenario1.vue
        β”œβ”€β”€ Story2
        β”œβ”€β”€ Story3
        β”œβ”€β”€ config.js           // config to re-order the story and the scenario
        └── index.js            // chain and add the addon here

Looking for suggestion!

  • How to customize style of the storybook
  • Authoring Vuex module? Is it necessary?
  • any others?