Vue Corator

Update

• [x] @Style: Style tag changed global to scoped 2019/08/22

License

MIT License

Install

npm i -S vue-corator

Vue.config.js

//if you use Vue CLI3.0
//vue.config.js
module.exports ={
    runtimeCompiler:true
}

or

webpack.config.js

//webpack
module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

Usage

• @Render
• @Style
• @NextTick
• @ScopedId
• @Super

See also

@Render(componentName?:string) decorator

<template>
  <good :items="data" title="Vue corator"></good>
</template>

import {Render} from 'vue-corator'
@Component
export default class YourComponent extends Vue {

    private data = ['hello', 'Functional Component'];

    @Render()
    private good(items: any, title: any) {
      return  `
            <div>
             <b> {{ title }} </b>
              <ul>
                <li v-for="(item,index) in items" :key="index">
                      {{ item }}
                </li>
              </ul>
            </div>`;
    }
}

See also: Runtime + Compiler vs. Runtime only.

@Style() decorator

<template>
  <div>
    <styleTagName1>
      .title { background:red }    // .title [data-v-<hash>] {background:red}
    </styleTagName1>   
  </div>
</template>

import {Style} from 'vue-corator'
@Component
export default class YourComponent extends Vue {

  @Style()
  private styleTagName1() {
    return `
        .title { background:pink }
    `;
  }
}

@NextTick() decorator

import { NextTick } from 'vue-corator'
@Component
export default class YourComponent extends Vue {
  @NextTick()
  private methodName(){
    this.method1();
  }
}

Is equivalent

@Component
export default class YourComponent extends Vue {
  private mounted() {
    this.$nexttick(()=>{
      this.method1();
    })
  }
}

@ScopedId(Key?: string) decorator

import { Component, Prop, Vue } from 'vue-property-decorator';
import { ScopedId } from 'vue-corator';
@Component
export default class YourComponent extends Vue {
  @ScopedId() scopedId!: string      //returns component Id like 'data-v-xxxxx'
}

returns component Id like 'data-v-xxxxx'

@Super(component: any) decorator

import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class Parent extends Vue {

  private father(){
      console.log('father')
  }
}

import { Component, Prop, Vue } from 'vue-property-decorator';
import { Super } from 'vue-corator';
import Parent from './parent.vue'
@Component
export default class Child extends Parent {
  @Super(Parent) super!: any  

  private father(){
      console.log('childs father')
  }

  private mounted(){
    console.log(this.father());
    console.log(this.super.father());
  }
}

  $ childs father
  $ father