vue-facing-decorator

import { createApp } from 'vue'; import { Component, Prop, Vue, toNative } from 'vue-facing-decorator'; @Component({ name: 'GreetingDisplay', emits: ['greeted'] }) class GreetingDisplay extends Vue { @Prop({ type: String, default: 'World' }) readonly name!: string; message: string = 'Hello'; get fullGreeting(): string { return `${this.message}, ${this.name}!`; } sayHello(): void { console.log(this.fullGreeting); this.$emit('greeted', this.fullGreeting); } // Example lifecycle hook mounted(): void { this.sayHello(); console.log('GreetingDisplay component mounted.'); } } // Create Vue app instance and register the class component const app = createApp({ template: ` <div id="app-root"> <h1>Vue Facing Decorator Example</h1> <greeting-display :name="'Developer'" @greeted="handleGreeted" /> <greeting-display /> </div> `, components: { // Convert the class component to a native Vue options API component for registration GreetingDisplay: toNative(GreetingDisplay) }, methods: { handleGreeted(msg: string) { console.log('Component greeted:', msg); } } }); app.mount('#app'); // To run this, you would typically have an index.html file with a div#app element: // <div id="app"></div>