Skip to content
Visualizer of CWL (Common Workflow Language) workflows for Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Move example to docs folder Feb 25, 2018
LICENSE Initial commit Feb 15, 2018 Update readme for GH Pages Feb 25, 2018
cwl.vue First working demo Feb 18, 2018
package.json Bump version Feb 25, 2018
webpack.config.js Initial README Feb 24, 2018


Vue CWL provides a Vue component for the visualization of CWL (Common Workflow Language) workflows.


Install from npm:

npm install vue-cwl --save-dev

Or, if you want the latest development version, install from github:

npm install git+ --save-dev

Adding to Vue

Vue CWL is exported as a UMD module, which means that you can either import it with a module loader, or import it directly in the browser.

If using webpack:

import Vue from 'vue';
import Cwl from 'cwl-svg';

new Vue({
    el: '#vue',
    components: {
        cwl: Cwl

If using no bundler:

<script src=""></script>
<script src="node_modules/vue-cwl/dist/index.js"></script>
    Vue.config.devtools = true;
    Vue.config.debug = true;
    new Vue({
        el: '#vue',
        components: {
            cwl: vueCwl.default


Vue CWL components currently accept 4 props:

  • cwl:
    • type: Object
    • default: null
    • description: The JSON object representing the CWL workflow to render
  • cwlUrl:
    • type: String
    • default: null
    • description: A URL to request for the initial CWL object from. Used as an alternative to the "cwl" prop`
  • editingEnabled:
    • type: Boolean
    • default: false
    • description: True if the workflow is editable
  • plugins:
    • type: Array
    • default: No plugins
    • description: A list of CWL plugins to use in the CWL rendering


An online demo of Vue CWL is available at

If you wish to build the demo yourself:

  • Clone the repo
  • Run npm run demo
  • Then browse to http://localhost:8080/docs/ in your web browser (or whatever URL the command prints out)
You can’t perform that action at this time.