@mdreal/vue-3-class-component v1.0.6

Vue 3 Class Components

Installation

npm install @mdreal/vue-3-class-component
# or
yarn add @mdreal/vue-3-class-component

Usage

<template>
  <div>Hello World {{ count }}</div>
  <div>Computed: {{ computedProperty }}</div>
  <div>Name: {{ name }}</div>
  <div>Data: "{{ data }}"</div>
  
  <div>
    <input v-model="name" />
  </div>
  <div>
    <button @click="increase">Increase</button>
    <button @click="decrease">Decrease</button>
  </div>
</template>

<script lang="ts">
import { Component, Computed, Prop, VueClassComponent } from "@mdreal/vue-3-class-component";

@Component()
export default class ComponentName implements VueClassComponent {
  count = 1
  
  @Prop(String)
  data: string;
  
  @Computed
  computedProperty() {
    return this.count * Math.random();
  }

  increase() {
    this.count++;
  }

  decrease() {
    this.count--;
  }
}
</script>

API

@Component

Class decorator which register class as component Arguments: [{ name: string, components: Component[] } Optional]

@Prop

Arguments: Any Class Constructor Property Decorator which registers property as vue prop

@Computed

Method Decorator which registers method as computed prop in vue.