Vue ts

Better Vue -> Typescript integration

Version: 1.0.11 Updated: 06/07/2016

By: weichx License: ISC

Downloads Last 30 Days: 304

Install

npm i vue-ts
yarn add vue-ts

Repository: https://github.com/weichx/vue-ts

CDNs

bundle.run: https://bundle.run/vue-ts

jsDelivr: https://cdn.jsdelivr.net/npm/vue-ts

unpkg: https://unpkg.com/vue-ts

vue-ts

This is an annotation based library for defining Vuejs components

    @VueComponent("example-component", '<div>Template or selector</div>')
    export class Example extends  VueApi {

        //exposes `someDataProperty` to the template
        @data public someDataProperty : string;
        //defines a non required prop
        @prop public somePropFromParent : string;
        //all vue prop options can passed in here
        @prop({required: true}) public aRequiredProp: Object;

        //you can use construtor in place of (or in addition to) vue's `created` hook
        constructor() {
            //by the time the constructor runs all props have been assigned
            var value = this.somePropFromParent;
            //all the normal vue Api methods are usable like normal
            this.$emit('someEvent', 5);
        }

        //all prototype methods are exposed to the view
        public someMethod() : void {

        }

        //all property getters / setters are exposed to the view
        public get lightSaberColor() : string {
            return 'blue';
        }

        //add watcher callbacks with @watch
        @watch('someDataProperty')
        public watcherMethod(oldValue : any, newValue : any) : void {

        }

        //watch can be set in deep mode and optionally invoked immediately
        @watch('someDataProperty', {deep: true, immediate: true})
        public deepWatchedMethod(string : any, string : any) : void  {

        }

        //called when some event fires
        @on('someEvent')
        public eventHandler(evt : any) {

        }

        //called only once when some event fires
        @once('someEvent')
        public handleEventOnce() {

        }
    }

    //you can register plugins to run before the constructor of an instance
    //instance is the vue object created by the component
    //component name is the dom-name of the component (like `my-component`)
    //target class is the typescript class 
    VueComponentCreationPlugins.push(function (instance : VueApi, componentName? : string, targetClass? : Function) {
        instance.$emit('Im called before creation');
    });

    //you can register plugins to run when the class is resolved
    //this is useful for things like dependency injection
    //target class the Typescript class you defined, vueClass is the 
    //`vue-ified` version of the class 
    VueComponentResolutionPlugins.push(function (targetClass : Function, vueClass : Function) {
        //can return a promise but dont have to
        return injectDependencies(targetClass); 
    });

Contributors



weichx
commits

Dependencies


Categories: Vue js