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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Move example to docs folder Feb 25, 2018
.gitignore
.npmignore
LICENSE Initial commit Feb 15, 2018
README.md Update readme for GH Pages Feb 25, 2018
cwl.vue First working demo Feb 18, 2018
package-lock.json
package.json Bump version Feb 25, 2018
webpack.config.js Initial README Feb 24, 2018

README.md

Vue CWL

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

Installation

Install from npm:

npm install vue-cwl --save-dev

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

npm install git+https://git@github.com/TMiguelT/vue-cwl.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="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="node_modules/vue-cwl/dist/index.js"></script>
<script>
    Vue.config.devtools = true;
    Vue.config.debug = true;
    new Vue({
        el: '#vue',
        components: {
            cwl: vueCwl.default
        }
    })
</script>

Usage

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

Demo

An online demo of Vue CWL is available at https://tmiguelt.github.io/vue-cwl/index.html

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.