🤗 One-stop solution for vue component documentation. Original org: https://github.com/vuese

Related tags

Docs vuese
Overview

vuese

One-stop solution for vue component documentation

This project is supported by our Backers

build status License PRs Welcome Commitizen friendly Code style Support me

Document

For detailed documentation: vuese.org

Overview

Vuese Automatically generate documentation for your vue component, and provides a variety of solutions for generating component documentation to meet your different needs.

@vuese/cli

@vuese/cli is a command line tool that is very simple to use. If you want to quickly build a documentation site for your vue component or just want to generate markdown document for your vue component, then this tool might be a good choice. Please go to the details: @vuese/cli

@vuese/parser

The @vuese/parser module is the parser for the vue component, @vuese/cli internally parsing the vue component via the @vuese/parser module and extract the information we want. You can do any more advanced things with the interface provided by the @vuese/parser module. For the API documentation, please go to @vuese/parser

Online experience

Visit the following 👇 link to intuitively feel @vuese/parser:

An online experience playground for vuese

@vuese/markdown-render

@vuese/markdown-render receives the result of the Vue file parsed by @vuese/parser as a parameter, generate a markdown string. @vuese/markdown-render is also used for @vuese/cli's document generation, in other words, you can use @vuese/markdown-render and @vuese/parser alone to write your own CLI tool to do something interesting.

@vuese/loader

@vuese/cli is a tool for quickly creating document prototypes that don't have a more flexible documentation solution. So this is why @vuese/loader and @vuese/webpack-plugin are needed.

Our goal is to focus only on the parts that can be automated, and does not limit how your document project is organized and what document framework is used. Of course, we can also provide fast solutions.

[WIP][todo]

@vuese/webpack-plugin

[WIP][todo]

Roadmap

Planning for vuese2.x: Read our roadmap

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: yarn commit
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Developer Resources

Running a Local Build

In root directory of your Vuese project:

  1. Run yarn run build
  2. Run yarn link

In project that you want to use the libaries:

  1. If @vuese/cli is not yet installed, add it: yarn add @vuese/cli
  2. Run yarn link vuese-monorepo
  3. Navigate to node_modules/.bin and open vuese.cmd and vuese
  4. Change any instance of @vuese to vuese-monorepo\packages in both files

To generate the documentation locally, run the vuese binary from node_modules/.bin :

  1. Run node_modules\.bin\vuese gen (cmd) or
  2. Run node_modules/.bin/vuese gen (powershell)

Samples

Component Notation

  1. Samples/Components Folder
  2. Vuese Explorer

Component Documentation

  1. Samples/Docs Folder

Get started immediately in a free online dev environment:

Open in Gitpod

Contributors

Thanks goes to these wonderful people:


HcySunYang

💻 ⚠️ 📖 💡

Barthélémy Ledoux

🐛 💻

Bernhard Wittmann

💻 🤔

Steve Young

🐛 💻

wulunyi

💻

Estelle00

💻

Matt Roxburgh

🐛 💻

James George

💻 📖

IWANABETHATGUY

💻 ⚠️ 📖 🐛

screetBloom

💻 ⚠️ 📖 🐛 🚇

Michele Girini

⚠️ 🐛 💻

Author

Vuese © HcySunYang, Released under the MIT License.
Authored and maintained by HcySunYang.

homepage · GitHub @HcySunYang · Twitter @HcySunYang

Comments
  • Eslint and vuese default properties

    Eslint and vuese default properties

    Describe the bug The default declaration to an array property in Eslint is default () { return [] } like they describe in this link https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-valid-default-prop.md, but when i use vuese my output is the below because vuese search for default: []

    Vuese output pictures

    Screenshot_2019-05-21 TraysCard - Components

    opened by VitoriaFaria 13
  • Typescript still not working

    Typescript still not working

    Describe the bug Typescript still not working

    To Reproduce Using just the parser, I ran the following:

    const { parser } = require('@vuese/parser')
    
    // Read vue file content
    const source = `
    <template>
      <div>
        <button @click="clicked">click</button>
        <br>
        {{x}}
      </div>
    </template>
    
    <script lang="ts">
      import { Component, Prop, Vue } from 'vue-property-decorator'
    
      @Component
      export default class ModulesDemo extends Vue {
    
        @Prop() x :string
    
        clicked() {
          this.x = new Date().toString()
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    
      
    `
    // Parse and get the result using the parser function
    try {
      console.log(source)
      const parserRes = parser(source)
      console.log(parserRes)
    } catch(e) {
      console.error(e)
    }
    
    

    Expected behavior Expected to see something in parserRes object. Instead parserRes was empty:

    { componentDesc: { default: [] } }
    

    Screenshots not applicable

    Which version do you use: 1.4.7

    Additional information none

    enhancement feature request 
    opened by davidmoshal 12
  • Windows下面运行gen直接NPM报错退出

    Windows下面运行gen直接NPM报错退出

    image

    0 info it worked if it ends with ok 1 verbose cli [ 'd:\Program Files\nodejs\node.exe', 1 verbose cli 'd:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'gen' ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'pregen', 'gen', 'postgen' ]

    13 verbose stack Error: [email protected] gen: vuese gen --include="app/web/**/*.vue" 13 verbose stack Exit status 1 13 verbose stack at EventEmitter. (C:\Users\H004335.WTOIP\AppData\Roaming\nvm\v8.11.3\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16) 13 verbose stack at emitTwo (events.js:126:13) 13 verbose stack at EventEmitter.emit (events.js:214:7) 13 verbose stack at ChildProcess. (C:\Users\H004335.WTOIP\AppData\Roaming\nvm\v8.11.3\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14) 13 verbose stack at emitTwo (events.js:126:13) 13 verbose stack at ChildProcess.emit (events.js:214:7) 13 verbose stack at maybeClose (internal/child_process.js:925:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

    opened by a526672351 11
  • Cannot generate Docute document (error message)

    Cannot generate Docute document (error message)

    Hello,

    Thanks for this interesting project. I have tried to set up a Docute document, but I'm failing using the gen command every time using vuese gen --include="src/pages/search/*.vue".

    The error reads

    ⏳  Start creating markdown files...
    TypeError: Cannot read property 'children' of undefined
        at Object.comment (/usr/local/share/.config/yarn/global/node_modules/vue-template-compiler/build.js:2575:21)
        at parseHTML (/usr/local/share/.config/yarn/global/node_modules/vue-template-compiler/build.js:345:23)
        at parse (/usr/local/share/.config/yarn/global/node_modules/vue-template-compiler/build.js:2402:3)
        at baseCompile (/usr/local/share/.config/yarn/global/node_modules/vue-template-compiler/build.js:4267:13)
        at Object.compile (/usr/local/share/.config/yarn/global/node_modules/vue-template-compiler/build.js:4242:22)
        at sfcToAST (/usr/local/share/.config/yarn/global/node_modules/vuese/dist/vuese.js:28:47)
        at parser$1 (/usr/local/share/.config/yarn/global/node_modules/vuese/dist/vuese.js:402:20)
        at files.map (/usr/local/share/.config/yarn/global/node_modules/vuese/lib/index.js:30:23)
        at <anonymous>
    

    Anyone knows why this happens?

    Also, I'd like to know if the command parses all subdirectories automatically?

    Thank you in advance

    opened by arjanski 11
  • Add support for mixins

    Add support for mixins

    Adds the ability for Vuese to be used with mixins. Mixins are still not picked up automatically so this functionality is completely optional. Adding **/*.js to the included will allow these to be picked up.

    Let me know if you see something you would like changed.

    Thanks!

    (This PR was made in place of #103, because a lot has changed and to keep git history clean)

    opened by TayHobbs 9
  • Keep Folder Structure

    Keep Folder Structure

    Hi,

    wondering if there is an option to keep the folder structure of files when exporting to markdown in a new directory:

    components/
       - forms/
            MyForm.vue
       - nav/
            LeNav.vue
    

    resulting in:

    components/
        - forms/
              MyForm.md
        - nav/
              LeNav.md
    

    .. instead of a flat list of Markdown files. this would be very useful for automated postprocessing in other markdown tools. Maybe there should be an option to use the "group" annotation for a new folder structure.

    What do you think?

    Cheers, Rainer

    feature request cli 
    opened by rainerCH 9
  • Enhancement request - document Computed properties when flagged using // @vuese

    Enhancement request - document Computed properties when flagged using // @vuese

    When generating MixIns then computed properties are important to know about.

    Also useful when documenting components for internal use.

    I have created a pull request with this feature implemented. Compute docs #58

    enhancement has PR 
    opened by roxburghm 8
  • Typescript support?

    Typescript support?

    Wondering if this plugin can parse .vue files with typescript, classes, and less styles?

    e.g:

    <template>
      <div>
        demo
      </div>
    </template>
    
    <script 
      lang="ts">
    
      import { Component, Vue } from 'vue-property-decorator';
    
      @Component
      export default class Demo extends Vue{
      
      }
    </script>
    
    <style 
       lang="less" 
       scoped>
    
    </style>
    
    Want to achieve 
    opened by davidmoshal 8
  • Add ability to create docs for store.js and <mixin>.js files.

    Add ability to create docs for store.js and .js files.

    This PR adds the ability for Vuese to be used with the store.js file and any mixins. I didn't set these to be automatically included, so this functionality would be completely optional. Adding **/*.js to the included will allow these to be picked up.

    I am not too familiar with TypeScript, so if there a better way to accomplish any of this, or if you see anything you would like changed, let me know and I will update this PR.

    Thanks!

    opened by TayHobbs 7
  • 404 error when outDir is used with different path

    404 error when outDir is used with different path

    Describe the bug When you use a different output folder via Outdir="/some/folder/path" then it will not find the html file when you try to open the docs. It just shows 404 The requested Path could not be found.

    To Reproduce Steps to reproduce the behavior:

    1. vuese gen outDir='resources/docs/1.0/vuese'
    2. vuese serve --open

    Expected behavior Open the documentation

    Which version do you use: 1.4.7

    opened by janiskelemen 7
  • Config has no effect on generate

    Config has no effect on generate

    Hi,

    nice tool! However, I cannot seem to get the config file to work. No matter what I type in there as include value it always loads all .vue files from my project root. Even if I directly enter an include option like vuese gen --include="assets/js/components//*.vue"** it just seems to ignore the given path.

    Best regards Janis

    opened by janiskelemen 7
  • Props not read when using defineComponent

    Props not read when using defineComponent

    Describe the bug When I use defineComponent, Vuese does not extract props.

    To Reproduce You can see it in the sandbox: https://vuese.github.io/vuese-explorer/

    First, try it without defineComponent:

    <template>
    	<div />
    </template>
    
    <script>
    export default {
      name: 'MyComponent',
      props: {
        // Loading
        loading: {
          type: Boolean,
        },
      },
    };
    </script>
    

    This will output a props section with the loading prop, its type and the comment above it.

    Then with:

    <template>
    	<div />
    </template>
    
    <script>
    import {defineComponent} from 'vue';
    
    export default defineComponent({
      name: 'MyComponent',
      props: {
        // Loading
        loading: {
          type: Boolean,
        },
      },
    });
    </script>
    

    This will output nothing.

    Expected behavior Props to show up in the example where I use defineComponent, just as they do in the one without it.

    opened by EdieLemoine 0
  • SpreadElement in Props Object doesn't extract success

    SpreadElement in Props Object doesn't extract success

    Describe the bug SpreadElement in Props Object doesn't extract success.

    To Reproduce Steps to reproduce the behavior:

    1. use props object with SpreadElement
    2. vuese/parser parse vue sfc

    Expected behavior SpreadElement Object in props can parse success

    Screenshots image

    use vuese/parser. cannot extract commonProps

    image

    Environmental information: For convenience, you can get environmental information by executing the vuese info command.

    Additional information Add any other information about the problem here.

    opened by jy0529 2
  • Description of the component not generate in the docs, vuese doesn't create group

    Description of the component not generate in the docs, vuese doesn't create group

    Describe the bug I commented my component

    /**

    • @vuese
    • @group Dashboard
    • Show and manage client dashboard */ export default { name: "ClientDashboard", ... }

    But after vuese generating docs it doesn't show description and doesn't group components:

    Screenshot from 2022-05-31 17-23-46

    To Reproduce Steps to reproduce the behavior:

    1. npx vuese gen
    2. npx vuese serve --open

    Without npx it doesn't work.

    Expected behavior I expected "Show and manage client dashboard" text under the " ClientDashboard" text. I expect to see group Dashboard in the left sidebar

    Environmental information:

    vuese * 1.4.7

    vuese cli

    USAGE

    vuese * [options]
    

    GLOBAL OPTIONS

    -v, --version  Display version                     [Type: boolean]
    -h, --help     Display help (You're already here)  [Type: boolean]
    
    opened by ybbam 0
  • build(deps): bump node-fetch from 2.6.1 to 2.6.7

    build(deps): bump node-fetch from 2.6.1 to 2.6.7

    Bumps node-fetch from 2.6.1 to 2.6.7.

    Release notes

    Sourced from node-fetch's releases.

    v2.6.7

    Security patch release

    Recommended to upgrade, to not leak sensitive cookie and authentication header information to 3th party host while a redirect occurred

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.6...v2.6.7

    v2.6.6

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.5...v2.6.6

    v2.6.2

    fixed main path in package.json

    Commits
    • 1ef4b56 backport of #1449 (#1453)
    • 8fe5c4e 2.x: Specify encoding as an optional peer dependency in package.json (#1310)
    • f56b0c6 fix(URL): prefer built in URL version when available and fallback to whatwg (...
    • b5417ae fix: import whatwg-url in a way compatible with ESM Node (#1303)
    • 18193c5 fix v2.6.3 that did not sending query params (#1301)
    • ace7536 fix: properly encode url with unicode characters (#1291)
    • 152214c Fix(package.json): Corrected main file path in package.json (#1274)
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by endless, a new releaser for node-fetch since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps): bump trim-off-newlines from 1.0.1 to 1.0.3

    build(deps): bump trim-off-newlines from 1.0.1 to 1.0.3

    Bumps trim-off-newlines from 1.0.1 to 1.0.3.

    Commits
    • c3b28d3 1.0.3
    • 6226c95 Merge pull request #4 from Trott/fix-it-again
    • c77691d fix: remediate ReDOS further
    • 76ca93c chore: pin mocha to version that works with 0.10.x
    • 8cd3f73 1.0.2
    • fcbb73d Merge pull request #3 from Trott/patch-1
    • 6d89476 fix: update regular expression to remove ReDOS
    • 0cd87f5 chore: pin xo to latest version that works with current code
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by trott, a new releaser for trim-off-newlines since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
vuese
One-stop solution for vue component documentation
vuese
📇 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
React inspired style guide generator for Vue.js

?? [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

Mikhail Kuznetcov 123 Jul 30, 2020
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
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
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
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
vuejs and Django integration with hot code reload. Dont use this, use https://github.com/NdagiStanley/vue-django or https://github.com/gtalarico/django-vue-template

hello-vue + Django This is a boilerplate project for using vuejs with Django. Features Django backend in ./backend vuejs (v2) frontend in ./frontend H

Rokas Kupstys 330 Oct 6, 2022
Filscan browser is the filecoin blockchain browser and data service platform,It provides one-stop data services such as mining ranking, blockchain data query and visualization chart based on filecoin

Filscan browser is the filecoin blockchain browser and data service platform,It provides one-stop data services such as mining ranking, blockchain data query and visualization chart based on filecoin

Filscan Team 9 Jun 2, 2022
A Vue.js (https://github.com/vuejs/vue) plugin that offers a reusable directive to get image from Cloudinary (https://cloudinary.com)

vue-cloudinary A Vue.js plugin that offers a reusable directive to get image from cloudinary Overview This is a port of the angular-cloudinary library

Diego Pamio 25 Dec 5, 2020
Generate a Markdown Documentation for a SFC Vue Component. Contribute: https://gitlab.com/vuedoc/md#contribute

Vuedoc Markdown Documentation Generator Generate a Markdown Documentation for a Vue file Table of Contents Install Features Command line usage Command

null 157 Oct 25, 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
▶️ 🎹 🎵 HTML5 audio tag sound player UI for Vue.js - supports single, loop, pause/stop modes etc

Vue.js sound player Vue.js sound audio player UI. Covers audio-tag API and adds more. Demo See DEMO here Installation Use npm: npm install vue-audio -

Mikhail Kuznetcov 172 Aug 25, 2022
A tiny Vue directive that stop propagation scroll when edge reached

vue-scroll-stop A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events ✅ On ❌

Volodymyr Antoniuk 41 Feb 4, 2022
KOKK - a tool that fetches a Markdown file and renders it as a beautiful one-page documentation.

Create a beautiful doc from a markdown file. You can insert a vue component into the doc as well.

怡潼 55 Sep 15, 2021