Skip to content
Vue docgen loader for webpack
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: Add publish workflows for pre-releases Dec 15, 2019
src feat: @ignore JSDoc tag for slots Feb 21, 2020
test
.editorconfig Initial commit Nov 14, 2019
.gitignore tests: Add component render test Dec 6, 2019
.nvmrc Initial commit Nov 14, 2019
CHANGELOG.md v1.5.0 Feb 21, 2020
CODE_OF_CONDUCT.md docs: Format Markdown files Nov 14, 2019
CONTRIBUTING.md docs: Create CONTRIBUTING.md Nov 14, 2019
LICENSE docs: Add LICENSE Nov 14, 2019
README.md feat: Add injectAt option Dec 15, 2019
package.json v1.5.0 Feb 21, 2020

README.md

vue-docgen-loader

Current status of Test and Lint workflow Current status of Publish package workflow

npm npm

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

You can’t perform that action at this time.