vue-docgen-loader

What is vue-docgen-loader?

The vue-docgen-loader is a webpack loader for generating documentation from Vue.js components. It integrates with vue-docgen-api to extract information from Vue components and produce documentation in various formats.

What are vue-docgen-loader's main functionalities?

Generate Documentation

This feature allows you to generate documentation for your Vue components by adding vue-docgen-loader to your webpack configuration. The loader processes .vue files and extracts documentation information.

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-docgen-loader',
        options: {
          docgenOptions: {
            alias: {
              '@': './src'
            }
          }
        }
      }
    ]
  }
};

Customizing Documentation Output

This feature allows you to customize the output of the documentation by specifying custom slots and props. This can be useful for tailoring the documentation to your specific needs.

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-docgen-loader',
        options: {
          docgenOptions: {
            alias: {
              '@': './src'
            },
            customSlots: ['slotName'],
            customProps: ['propName']
          }
        }
      }
    ]
  }
};

Other packages similar to vue-docgen-loader

vue-styleguidist

Vue Styleguidist is a tool for creating style guides for Vue components. It provides a live playground for your components and supports documentation generation. Compared to vue-docgen-loader, Vue Styleguidist offers a more comprehensive solution for creating and maintaining component libraries with live examples.

vue-docgen-api

Vue Docgen API is a library for extracting documentation from Vue components. It is the underlying library used by vue-docgen-loader. While vue-docgen-api focuses on the extraction of documentation data, vue-docgen-loader integrates this functionality into the webpack build process.

README

vue-docgen-loader

This package allows parsing Vue component file with vue-docgen-api then injecting the result into the output file.

Getting Started

First, install the loader and vue-docgen-api.

$ yarn add -D vue-docgen-loader vue-docgen-api
# or npm
# $ npm i -D vue-docgen-loader vue-docgen-api

Then add the loader to your webpack config file. Please make sure to run the loader at the last of the loader chain.

import MyComponent from './my-component.vue'

Vue.extend({
  // You can use the components as usual
  components: { MyComponent }
})

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        // You also can put this loader above, but I recommend to use
        // a separeted rule with enforce: 'post' for maintainability
        // and simplicity. For example, you can enable the loader only
        // for development build.
        test: /\.vue$/,
        use: 'vue-docgen-loader',
        enforce: 'post'
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
}

If you want to apply this loader to non-SFC files like below, you also need to setup a rule for them. This works only with vue-docgen-api >= 4.0.0.

// my-button.js
import Vue from 'vue'

export const MyButton = Vue.extend({
  props: {
    foo: {
      type: String
    }
  },
  template: '<button/>'
})

// other.js
import MyButton from './my-button.js?component'

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // Please make sure to apply the loader only for Vue components: In this
      // sample, only modules imported with ?component query will match.
      //
      // IMPORTANT!
      // Do not use ?vue query if you're using vue-loader. It will sliently inject
      // .js?vue rule into rules array and it breaks the module.
      {
        test: /\.js$/,
        resourceQuery: /component/,
        use: 'vue-docgen-loader',
        enforce: 'post'
      }
    ]
  }
}

Options

You can pass options for vue-docgen-api through docgenOptions and specify the property name the loader inject docgen result at.

{
  test: /\.vue$/,
    loader: 'vue-docgen-loader',
    options: {
      docgenOptions: {
        // options for vue-docgen-api...
      },
      // Injected property name
      injectAt: '__docgenInfo' // default
    },
    enforce: 'post'
}

Contributing

Please read our contributing guidelines.

CONTRIBUTING

Changelog

[2.0.1] - 2024-10-29

Fixed

• Upgrade to the latest version of jscodeshift package, which updates/removes vulnerable package versions (661a26b).