# vue-corator

> this is TypeScript Vue decorator.

Latest version **1.6.6** (published 2019-08-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-corator
pnpm add vue-corator
yarn add vue-corator
bun add vue-corator
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.6 |
| Published | 2019-08-23 |
| First published | 2019-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 32 |
| Author | joon610 |
| Maintainers | joon610 |
| Keywords | vue, typescript, decorator |

## Links

- npm: https://www.npmjs.com/package/vue-corator
- Repository: https://github.com/joon610/vue-corator
- Homepage: https://github.com/joon610/vue-corator#readme
- Issues: https://github.com/joon610/vue-corator/issues
- npm.io page: https://npm.io/package/vue-corator

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.0.1

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.6.6 (latest) — 2019-08-23
- 1.6.5 — 2019-08-21
- 1.6.3 — 2019-08-04
- 1.6.1 — 2019-07-31
- 1.6.0 — 2019-07-31
- 1.5.3 — 2019-07-30
- 1.5.2 — 2019-07-30
- 1.5.1 — 2019-07-30
- 1.5.0 — 2019-07-30
- 1.4.10 — 2019-07-18
- 1.4.9 — 2019-07-14
- 1.4.8 — 2019-07-14
- 1.4.7 — 2019-07-14
- 1.4.6 — 2019-07-14
- 1.4.5 — 2019-07-12
- … 15 more at https://npm.io/package/vue-corator/versions

## README

# Vue Corator


## Update
- [x] @Style: Style tag changed global to scoped  2019/08/22


## License

MIT License

## Install

```bash
npm i -S vue-corator
```

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

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

## Usage

- [`@Render`](#Render)
- [`@Style`](#Style)   
- [`@NextTick`](#NextTick)
- [`@ScopedId`](#ScopedId)
- [`@Super`](#Super)

## See also

### <a id="Render"></a> `@Render(componentName?:string)` decorator


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

```ts
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.](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only)


### <a id="Style"></a> `@Style()` decorator

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

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

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

### <a id="NextTick"></a> `@NextTick()` decorator

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

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

### <a id="ScopedId"></a> `@ScopedId(Key?: string)` decorator

```ts
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'



### <a id="Super"></a> `@Super(component: any)` decorator

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

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

```ts
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());
  }
}
```
```log
  $ childs father
  $ father
```

---
_Source: https://npm.io/package/vue-corator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._