Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-harness with all npm packages installed. Try it out:

var vueHarness = require("vue-harness")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-harness v1.0.1

Harness for vue components

vue-harness

vue harnessing goodness

This is first swag at getting a harnessing system working for vue components and should not be viewed as a usable project at this time.

Standalone Mode

Basic Structures

export interface IHarnessOptions extends VueComponentOption {
    //A reference to a Vue component or function resolving a vue component (or component options)
    //this is optional if template is provided, otherwise required
     component? : (resolve : Thenable<VueApi>) => void | typeof Vue;
     //should the harness try to automatically map fields exposed in the vue `data` object to 
     //attributes in the template? (default true)
     autobindProps? : boolean;
     //a custom vue template string you can provided. this is required if component is not provided.
     //if you provide both, you can use the string COMPONENT in your template to inject the 
     //relevant component html (with attributes if autobindProps is true)
     template? : string;
     //optionally position the harness relative to the document body
     position? : 'left' | 'right' | 'center' | 'none';
     //optionally constrain the width of the harness (passed directly to the css width property of the parent div)
     width? : string,
     //a reference to the parent of this harness
     parentHarness? : Harness
}

Creating a harness

In order to use harness you need an element in the dom with the id harness-mount-point

var harness = new Harness('HarnessNameHere', harnessOptionsHere);

harness.use(); //applies the harness and mounts it at `harness-mount-point`, removing a previous harness if there was one

Harness.Use('HarnessNameHere'); //same as `use()` called on an instance

Harness.Get('HarnessNameHere'); //returns a harness instance if it exists

What can be harnessed?

A harness is just a Vue component with some wrapping around it, that means you can provide all the normal vue hooks, data fields, methods, mixins etc as you will. The only thing not respected is the el property.

var myComponent = Vue.component('my-component', {
    template: '<h1>Hi {{name}}</h1>',
    props: ['name']
});

var h = new Harness('MyComponent', <IHarnessOptions>{
    component: myComponent,
    data: function () {
        return {
            name: 'matt' //results in template <h1>Hi matt</h1> since props are set to autobind by default (using v-bind)
        }
    },
    created: function() {},  //normal vue hooks are usable
    methods: {fn: function(){}} //same goes for methods, watchers, mixins etc
});

Extending a harness

Harnesses can be extended, so any options provided to the parent are set on the child unless explicitly overridden

//this is still using the myComponent from the parent, output is now <h1>Hi Matthew</hi> since we override data.name
var h2 = h.extend('MyComponent2', <IHarnessOptions>{
    position: 'left', //override parent default of 'center'
    data: function () { //override parent data where name is 'matt'
        return {
            name: 'Matthew'
        }
    }
});

Using with vue-ts


var options = {width: '25%'}; //normal IHarnessOptions provided here

// add @harness to your class annotation before @VueComponent
@harness('ExampleHarness', options)
@VueComponent('example', '<p>im an example, hello {{name}}</p>')
export class Example extends VueApi {
    @prop public name : string;
}

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free