vue-class-decorator

import Vue from 'vue'; import { Component, FunctionalVue, Filter, On, Mounted } from 'vue-class-decorator'; @Component export class DateComponent extends Vue { @Filter('formatDate') private formatDate(value: string): string { if (!value) return ''; const date = new Date(value); return date.toLocaleDateString(); } } @Component export default class MyFunctionalComponent extends FunctionalVue { message: string = 'Hello from functional!'; } @Component({ components: { DateComponent } }) export class EventHandlerComponent extends Vue { count: number = 0; @On('increment') handleIncrement(): void { this.count++; console.log('Incremented:', this.count); } @Mounted() onMounted(): void { console.log('EventHandlerComponent mounted!'); // Simulate emitting an event after 1 second setTimeout(() => { this.$emit('increment'); }, 1000); } } new Vue({ el: '#app', template: ` <div> <date-component :value="new Date().toISOString()"></date-component> <p>{{ '2023-10-26T10:00:00Z' | formatDate }}</p> <event-handler-component></event-handler-component> <p>Count in parent: {{ $children[2]?.count }}</p> </div> ` });