React inspired style guide generator for Vue.js

Overview

πŸ™€ [20/09/2017] Project discontinued πŸ™€

For purpose of having a demo of your Vuejs components please take a look at following projects that do really great job and are really handy for you dev workflow with Vuejs: storybook for vuejs and vue-styleguidist.

Vue js components styleguide generator πŸ“š

dependencies status

Initially started after reading this vue.js feature request. Now only basic proof of concept is available which can load folder with .vue files, parse it and extract basic props of it.

Target is to have some tool with at least some of the React version capabilities.

Idea is to have what vue-play does but in automated way - with one task run, plus READMEs, etc.

Generate single html file containing all components listed with details and search out from your .vue project files.

Questions & bugs

  • General questions please ping me on twitter @legkoletat.
  • Bugs and inconsistencies please create an issue . Please concider to adding more information on what is the codebase you're running the generator against, what errors (with code, if applicable) you got. To keep issues list clean and relevant issues with no feedback/details/activity will be closed within 3 days.

1. Examples

Running on large components collections

Output UI demo

resulting output

2. Setup

  1. npm install vue-styleguide-generator --save-dev

  2. add to you package.json in script section - for example like this "build-components": "node ./node_modules/vue-styleguide-generator/" and then run npm run build-components from the root folder of the project.

πŸƒ You can also manually (or using Gulp/Grunt) run node ./node_modules/vue-styleguide-generator/

3. Usage

βœ… Works only for Vue 2.x projects.

CLI options

Name Type Description Default
--src String Source dir, will be recursively scanned src
--dest String Destination output dir, file index.html will be placed there components-preview
--exclude RegExp File mask to exclude certain type of files /^./
--locale String Output locale language en
--verbose String Output all details while processing false
--all String Do not ignore any components false
--o String Open browser preview after generating false

E.g.: node ./node_modules/vue-styleguide-generator/ --src components --dest preview will read components from PROJECT_ROOT/components folder and provide a html page into PROJECT_ROOT/preview folder

To see all parser error run with DEBUG: DEBUG=app node ./node_modules/vue-styleguide-generator/

How the components are iterated

If you want to see more information about the component - add a .md file in the same directory. While retrieving the files the following assumptions are made:

  • if there are files with the same name in one folder (e.g. /scr/partials/TabBar.vue and /scr/partials/TabBar.md) it's assumed to be one component;
  • if there are only two files in the folder and one is .vue and another is .md (e.g. /scr/TabBar/codez.vue and /scr/partials/readers.md) it's assumed to be one component;
  • If there are >1 .vue files in the folder and .md file that does not have the same name as one of the .vue files - this .md file is ignored
  • Components with no props, no computed and no methods defined are considered to be a simple wrappers and not outputed

Found a bug or have a proposal - please create an issue or tweet me @legkoletat!

Todos

  • improve parsing technique and/or configuration to deal with variety of components organisation approaches
  • syntax highlighting
  • align parsing and display with vue-js-component-style-guide
  • core: move the demo-page to use Vue so that components can be generated from its declaration
  • ui: output extra component parameters (computable, data)
  • various use cases testing, added vuikit and Keen-UI links

Contributions are welcome πŸ‘ !

Especially on following:

Bugs and problems

  • window object may not be patched fully so some component's code execution may fail
  • 'vue-template-compiler' must be the same as the version of 'vue' you're using in your codebase. Now set to 2.1.10. may have to manually put to other version that's used in your project.'

Changelog

0.9.11

Now as from 0.9.11 also your .js files referenced from .vue files are supported.

0.9.15

Added -o option to open the browser. Refactoring the template. Added pt-br translation by israelss.

0.9.18

UI improvements (UX of the search block, 'Copy' component code).

License

MIT

Comments
  • Preview file is empty

    Preview file is empty

    Hello there, I'm trying to use vue-styleguide-generator, in the root of my project I have the folder /src/components that contains all my vue components. From the root directory I execute the script:

    `node ./node_modules/vue-styleguide-generator/ --src ./src --dest preview`
    

    But the preview folder remains empty. I tried also with: ./src/components -> preview empty ./ -> script does not terminate

    What am I doing wrong?

    EDIT: typo

    opened by sibliss 15
  • Generator doesn't look for files in included in a .vue file.

    Generator doesn't look for files in included in a .vue file.

    My vue files look like:

    /// dev-test.vue
    <template src="./dev-test.html"></template>
    <script src="./dev-test.js" lang="js"></script>
    <style src="./dev-test.scss" lang="scss"></style>
    

    I prefer to seperate the component files in one folder. I would like that these components will also be compiled. I tried finding the file which reads the .vue files but I couldn't find it. Could you point this out to me or edit this?

    bug enhancement 
    opened by StefanJanssen95 10
  • No components demo?

    No components demo?

    Hi, really nice projects, and i appreciate it.

    One question, when i saw demo from the link on README. There is no demo of the UI, well there are documentation, and props and etc. But there is no demo of the UI components itself. Is it intended to be like this or the development is not there yet or there is a bug?

    Thanks

    opened by muhajirdev 3
  • Error on a Fresh Vue Project from the Vue CLI

    Error on a Fresh Vue Project from the Vue CLI

    I generated a new Vue Project using the Vue CLI under these set options:

    ? Generate project in current directory? Yes
      This will install Vue 2.x version of the template.
    
      For Vue 1.x use: vue init webpack#1.0 
    
    ? Project name vue-best-practice
    ? Project description A Vue.js project
    ? Author 
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset none
    ? Setup unit tests with Karma + Mocha? Yes
    ? Setup e2e tests with Nightwatch? Yes
    

    From there I did the instructions from the set up section, ran npm run build-components and I got the following:

    Error: Couldn't find preset "es2015" relative to directory "/Users/e/Documents/Development/vue-best-practice"
        at /Users/e/Documents/Development/vue-best-practice/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
        at Array.map (native)
        at OptionManager.resolvePresets (/Users/e/Documents/Development/vue-best-practice/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
        at OptionManager.mergePresets (/Users/e/Documents/Development/vue-best-practice/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
        at OptionManager.mergeOptions (/Users/e/Documents/Development/vue-best-practice/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
        at OptionManager.init (/Users/e/Documents/Development/vue-best-practice/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
        at File.initOptions (/Users/e/Documents/Development/vue-best-practice/node_modules/babel-core/lib/transformation/file/index.js:212:65)
        at new File (/Users/e/Documents/Development/vue-best-practice/node_modules/babel-core/lib/transformation/file/index.js:135:24)
        at Pipeline.transform (/Users/e/Documents/Development/vue-best-practice/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
        at babelifyCode (/Users/e/Documents/Development/vue-best-practice/node_modules/vue-styleguide-generator/src/processor.js:23:16)
    

    Not entirely sure if this is a Bug on the style-guide-generator or something I should be posting on stack overflow.

    bug 
    opened by joshvillahermosa 3
  • Parse method arguments and more

    Parse method arguments and more

    Nice work done with this.

    As it is already parsing the methods, it would be nice to extend it to parse additional information like method arguments and emitted events.

    Going to try run this on a project at work to see how it comes out.

    opened by thomassjogren 2
  • Help with vue 2.4.4

    Help with vue 2.4.4

    Hi, I'm trying to use this with Vue 2.4.4.

    Regarding the known bug where vue-template-compiler needs to be the same version I'm using in my project, I upgraded node_modules/vue-styleguide-generator/package.json to use vue-template-compiler version 2.4.4 and rebuilt your module via npm run build, but get this error when I run node ./node_modules/vue-styleguide-generator from my project root:

    TypeError: Cannot read property 'src' of null
        at getComponentModuleJSCode (/Users/rbrewer/Development/UnitedRentals/kelex/docroot/themes/custom/unitedrentals/vue/node_modules/vue-styleguide-generator/src/processor.js:39:18)
    

    Any ideas? It's more verbose, but I can provide the DEBUG execution if you like. Thank you!

    opened by rkbrewer 0
  • Markdown file makes the generator skip the component with external javascript

    Markdown file makes the generator skip the component with external javascript

    The new external javascript feature is working pretty well, but I noticed that when I have a markdown file (with the same name) in the component folder it will skip the component in the generation process. When I delete the markdown file again it will see the component in the generation process.

    opened by StefanJanssen95 7
  • Small UI improvements

    Small UI improvements

    • Add option to open browser window automatically after creating guide
    • In component's props table show some not distracting but noticeable symbol instead of empty row, because it's unclear why it's empty
    • last row in generated preview may be not visible
    • proper localization (on generated page)
    opened by shershen08 0
Owner
Mikhail Kuznetcov
Fullstack developer <3 Javascript. Twitter: @shershen08
Mikhail Kuznetcov
πŸ“‡ Convert Markdown file to Vue component.

You have other better choices https://github.com/egoist/vmark https://github.com/liril-net/ware-loader vue-markdown-loader Convert Markdown file to Vu

cinwell.li 703 Nov 30, 2022
A library for documenting Vue components

Elucidate A library that makes it a breeze to "shed light" on your Vue component. Demo: https://mattrothenberg.github.io/vue-elucidate-example Demo Vi

Matt Rothenberg 35 Nov 16, 2022
:sparkles: Markdown files to ALIVE Vue components.

vue-md-loader Introduction Webpack loader for converting Markdown files to ALIVE Vue components. Configurable Markdown-It parser. Built-in syntax high

wxsm 111 Nov 20, 2022
A simple plugin for jsdoc (`pase vue SFC info to description`)

jsdoc-vue-component A simple plugin for jsdoc (pase vue SFC info to description by AST analysis). Maybe you will try jsdoc-vuedoc, and you have a bett

Season Chen 11 May 7, 2022
Custom story blocks for Vue single file components

vue-storybook Custom <story> blocks for Vue single file components that work out of the box with Vue CLI 3 and vue-cli-plugin-storybook. yarn add vue-

Matt Rothenberg 151 Aug 3, 2022
πŸ€— One-stop solution for vue component documentation. Original org: https://github.com/vuese

vuese One-stop solution for vue component documentation This project is supported by our Backers Document For detailed documentation: vuese.org Overvi

vuese 1.6k Nov 29, 2022
Easily build beautiful tutorials with Vue

VueTut Easily build beautiful tutorials with Vue. ?? β €Docs ?? β €Tutorial/Demo Install npm i vue-tut Setup import VueTut from 'vue-tut'; import 'vue-tut

Electron Vue Window Toolkit 44 Jul 10, 2022
Generate a JSON documentation for a SFC Vue component. Contribute: https://gitlab.com/vuedoc/parser#contribute

The Vuedoc Parser Generate a JSON documentation for a Vue file component. Table of Contents Install Features Options Usage Syntax Add component name A

null 86 Nov 15, 2022
A webpack loader for markdown file transform to vue file.

vue-dotmd-loader A webpack loader for loader markdown file transform to vue file. δΈ­ζ–‡ Features: Support to import Vue file components and render them i

θ“ζœˆθ§ζž« 10 May 18, 2022
Vue's template compiler reimplemented in Rust!

Vue Compiler in Rust Try it out in the wasm playground! Evan says: Maybe in the long run we want the whole transform (and even the Vue compiler!) to b

Herrington Darkholme 666 Nov 21, 2022
Created from react styleguidist for Vue Components with a living style guide

Isolated Vue component development environment with a living style guide Start documenting now on codesandbox.io Sponsors A big thank you to our spons

Vue Styleguidist 2.3k Nov 22, 2022
Using vue3.x composition api in react-hooks style.

v3-use Using vue3.x composition api in react-hooks style. Install npm install v3-use # or yarn add v3-use Usage <template> <div>{{state}}</div>

mufang 3 Oct 3, 2022
Diagram component for vue.js, inspired by react-diagrams

vue-diagrams Diagram component for vue.js, inspired by react-diagrams Generated using vue-cli-template-library. Installation npm install vue-diagrams

Gwenael Pluchon 246 Nov 15, 2022
Vue library for generating nice user avatar. (Inspired by react-nice-avatar)

Vue library for generating nice user avatar. (Inspired by react-nice-avatar)

η‚½ηΏŽ 60 Nov 16, 2022
Vue component for efficiently rendering large collection data. Inspired by react-virtualize.

vue-virtual-collection Vue component for efficiently rendering large collection data. Inspired by react-virtualize. Demo Table of Contents generated w

Weijia Wang 605 Oct 25, 2022
A form library for vue, inspired by Formik for react

vue-simpleform A form library for vue, inspired by Formik for react Is it really simple? I think it is, but really I couldn't think of a better name B

null 40 Aug 9, 2022
A Vue.js(v2.x+) component to make pagination. Inspired by react-paginate.

vuejs-paginate A Vue.js(v2.x+) component to make pagination. Inspired by react-paginate. Easy to use by providing simple api. And you can customize th

Setiawan Jodi 0 Feb 25, 2019
A component to demo components, inspired by react-live

vue-live A lightweight playground for live editing VueJs code in the browser Usage The simplest way to render components is as a VueJs template: <temp

Vue Styleguidist 187 Nov 14, 2022
React, React Native and Vue UI components for building data-driven apps with Elasticsearch

Reactive Search UI components library for Elasticsearch: Available for React, Vue and React Native Read how to build an e-commerce search UI a.) with

appbase.io 4.7k Nov 20, 2022