### Install vue-facing-decorator

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/quick-start/quick-start.md

Install the package using npm. Ensure experimentalDecorators is enabled in your tsconfig.json.

```bash
npm install --save vue-facing-decorator
```

```json
{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}
```

--------------------------------

### Component Setup Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Use the 'setup' option for Composition API-like logic within a class component. It cannot return a render function.

```typescript
import { Component } from 'vue-facing-decorator';

@Component({
  setup() {
    // ... setup logic
    return { /* ... */ };
  }
})
export default class App extends Vue {
  // ...
}
```

--------------------------------

### Base Usage of Provide

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/provide/provide.md

Demonstrates the fundamental usage of the provide pattern in Vue.js. Ensure the provide function is correctly implemented within your component setup.

```typescript
import { provide } from "vue";

export const useProvide = () => {
  provide("message", "hello from provide");
};

```

--------------------------------

### Injecting Composables with Setup Decorator

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/setup/setup.md

Use the `Setup` decorator to inject composables into your component's class as properties. Ensure the decorator is imported from 'vue-facing-decorator'.

```typescript
import { Setup } from 'vue-facing-decorator';
import { useCounter } from './useCounter';

export class CounterComponent {
  @Setup
  counter = useCounter();
}
```

--------------------------------

### Vue Class Component Example

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/readme.md

This is a basic example of a Vue component written using a class and decorators. It demonstrates how to define component options like `name` and `components` within the class.

```typescript
import { Component, Vue } from 'vue-facing-decorator';

@Component({
  name: 'hello-world',
  components: {
    // ...
  }
})
export default class HelloWorld extends Vue {
  // ...
}
```

--------------------------------

### Vue Composable Integration with @Setup

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Inject values from Vue Composition API composables into class components using the @Setup decorator. It accepts a function that receives props and context to return the composable result.

```typescript
import { Component, Vue, Setup, toNative } from 'vue-facing-decorator'
import { ref, computed } from 'vue'
import { useRouter, useRoute, Router, RouteLocationNormalizedLoaded } from 'vue-router'

@Component
class PageComponent extends Vue {
  @Setup((props, ctx) => useRouter())
  router!: Router

  @Setup((props, ctx) => useRoute())
  route!: RouteLocationNormalizedLoaded

  @Setup(() => ref(0))
  counter!: number

  navigate() {
    this.router.push('/home')
  }

  mounted() {
    console.log(this.route.path)
    console.log(this.counter) // 0
  }
}

export default toNative(PageComponent)
```

--------------------------------

### Vue Component with Class Decorators (TypeScript)

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/readme.md

Example of a Vue component written using TypeScript and class decorators. This demonstrates the basic structure for defining a component with properties and methods.

```typescript
import { Component, Vue } from "vue-facing-decorator";

@Component
export default class App extends Vue {
  // data
  message: string = "Hello";

  // computed
  get reversedMessage(): string {
    return this.message.split("").reverse().join("");
  }

  // methods
  changeMessage(newMessage: string) {
    this.message = newMessage;
  }
}

```

--------------------------------

### Vue Single-File Component (SFC) Integration

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Integrates `vue-facing-decorator` into `.vue` files by replacing `export default defineComponent({})` with a decorated class. Always use `<script lang="ts">`, never `<script setup>`.

```vue
<template>
  <div>
    <p>{{ greeting }}</p>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script lang="ts">
// DO NOT USE <script setup lang="ts">
import { Component, Vue, Prop, toNative } from 'vue-facing-decorator'

@Component
class MyComponent extends Vue {
  @Prop({ default: 'Hello' })
  name!: string

  count = 0

  get greeting(): string {
    return `${this.name}, you clicked ${this.count} times`
  }

  increment() {
    this.count++
  }

  mounted() {
    console.log('Component mounted')
  }
}

export default toNative(MyComponent)
</script>

<style scoped>
button { padding: 8px 16px; }
</style>
```

--------------------------------

### TypeScript Class Inheritance Example

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/inheritance/es-class/es-class.md

Demonstrates simulating ECMAScript class inheritance for Vue components. Classes like 'MyComponent' and 'Super' are merged by the library. Decorators cannot be used in a class without the 'Component' decorator, such as in a 'Super' class.

```typescript
import { Component } from "vue-facing-decorator";

@Component
class Super {
  public name: string = "super";
}

@Component
class MyComponent extends Super {
  public age: number = 10;
}

```

--------------------------------

### Create Custom Decorator with `createDecorator`

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/custom/custom.md

Use `createDecorator` to build your own decorators. The creator function receives the generated Vue options component and the key of the decorated class property or method. Install vue-facing-decorator as `devDependencies` and mark it in `peerDependencies` if you are a package author.

```typescript
import { createDecorator } from 'vue-facing-decorator';

export const MyDecorator = createDecorator((options, key) => {
  // Modify options or use key to implement custom logic
});
```

--------------------------------

### TypeScript and Vue Inheritance Example

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/inheritance/complex-example/complex-example.md

This code defines several components and their inheritance relationships using TypeScript and Vue. It highlights how Vue's `mixins` and `extends` can lead to property overwrites.

```typescript
class SuperCompSuper {}

class SuperComp extends SuperCompSuper {}

class CompSuper {}

@Component
class Comp extends CompSuper {
  // ...
}

@Component
class VueNativeComponent extends Vue {
  // ...
}

// Inheritance relationship:
// (Comp ECMAScript extends CompSuper)
//     vue mixins [VueNativeComponent]
//         vue extends (SuperComp ECMAScript extends SuperCompSuper)

// Due to vue implementation, VueNativeComponent (using vue mixins) will overwrite SuperComp (using vue extends).
```

--------------------------------

### Configure Docsify

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/index.html

This configuration object sets up the Docsify documentation generator, including repository links, cover page, sidebar, and navigation settings. It also defines aliases for different language routes.

```javascript
window.$docsify = {
  name: 'vue-facing-decorator',
  repo: 'https://github.com/facing-dev/vue-facing-decorator',
  coverpage: true,
  loadSidebar: true,
  maxLevel: 4,
  subMaxLevel: 4,
  loadNavbar: true,
  mergeNavbar: true,
  alias: {
    '/pt-br/(.*)': '/pt-br/$1',
    '/zh-cn/(.*)': '/zh-cn/$1',
    '/en/(.*)': '/en/$1',
    '/ja/(.*)': '/ja/$1',
    '/': '/readme.md',
    '^/_(.*)': '/en/_$1'
  }
}
```

--------------------------------

### Initialize Google Analytics

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/index.html

This snippet initializes the Google Analytics data layer and configures the tracking ID. It should be placed in your main HTML file.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-XF2VFJPE6C');
```

--------------------------------

### Define a Simplest Class Component

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/quick-start/quick-start.md

Create a basic class component by extending Vue and applying the Component decorator.

```typescript
import Vue from 'vue';
import { Component } from 'vue-facing-decorator';

@Component
export default class App extends Vue {
  render() {
    return <div>Hello World</div>;
  }
}
```

--------------------------------

### Watcher with Immediate Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/watcher/watcher.md

Set the `immediate` option to `true` to execute the watcher callback immediately after the component is created, with the initial value.

```typescript
import { Watch } from 'vue-facing-decorator';

export class App {
  message: string = 'Hello';

  @Watch('message', { immediate: true })
  onMessageChanged(newValue: string, oldValue: string) {
    console.log('Initial message:', newValue);
  }
}
```

--------------------------------

### Component Provide Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Configure the 'provide' option to make data available to child components.

```typescript
import { Component } from 'vue-facing-decorator';

@Component({
  provide: {
    message: 'hello world'
  }
})
export default class App extends Vue {
  // ...
}
```

--------------------------------

### Component Methods Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Define methods that will be exposed to the component instance.

```typescript
import { Component } from 'vue-facing-decorator';

@Component
export default class App extends Vue {
  myMethod() {
    console.log('Method called');
  }
}
```

--------------------------------

### TSX with Separated .ts / .tsx Files

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Separates component logic into a .ts file and template into a .tsx file. Use `Base` as the base class in this mode.

```typescript
// Comp.ts
import { Component, Base, toNative } from 'vue-facing-decorator'
import render from './Comp.render'

@Component({ render })
class Comp extends Base {
  counter = 1

  onClick() {
    this.counter++
  }
}

export default toNative(Comp)
```

```tsx
// Comp.render.tsx
import type Comp from './Comp'
import Style from './style.css'

export default function render(this: Comp) {
  return (
    <div class={Style.root} onClick={this.onClick}>
      {this.counter}
    </div>
  )
}
```

--------------------------------

### Class Field Initialization Not Supported

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/changelog/v4.0.0-beta.1.md

Demonstrates the removal of support for initializing class fields with `this.xxx` or method calls in class declarations. This pattern is no longer supported.

```typescript
@Component
class C extends Vue{
    @Prop
    prop!:string

    method(){return ''}

    field1 = this.prop //NOT SUPPORT

    field2 = this.method()  //NOT SUPPORT
}
```

--------------------------------

### Vue Provide/Inject with Decorators

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Use @Provide to expose values from a parent component and @Inject to consume them in a child. The 'from' option allows aliasing, and 'default' provides a fallback value.

```typescript
import { Component, Vue, Provide, Inject, toNative } from 'vue-facing-decorator'

// Parent component — provides values
@Component
class ParentComponent extends Vue {
  @Provide
  theme = 'dark'

  @Provide('app-version')  // inject as 'app-version'
  version = '4.0.1'
}

// Child component — injects values
@Component
class ChildComponent extends Vue {
  @Inject
  readonly theme!: string  // injects 'theme'

  @Inject({ from: 'app-version', default: '0.0.0' })
  readonly appVersion!: string  // injects 'app-version' with fallback

  mounted() {
    console.log(this.theme)      // 'dark'
    console.log(this.appVersion) // '4.0.1'
  }
}

export default toNative(ChildComponent)
```

--------------------------------

### Custom Decorator Creation with `createDecorator`

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Builds custom property/method decorators. The creator function modifies the Vue options object. Use `preserve: true` to retain the original value.

```typescript
import { createDecorator, Component, Vue, toNative } from 'vue-facing-decorator'

// Custom @Log decorator that wraps a method with logging
function Log(prefix: string) {
  return createDecorator(function (options, key) {
    const original = options.methods?.[key]
    if (!original) throw new Error(`Method "${key}" not found`)

    options.methods[key] = function (...args: any[]) {
      console.log(`[${prefix}] Calling ${key} with`, args)
      const result = original.apply(this, args)
      console.log(`[${prefix}] ${key} returned`, result)
      return result
    }
  }, { preserve: true }) // preserve: true keeps original method accessible
}

@Component
class MyService extends Vue {
  @Log('API')
  fetchUser(id: number) {
    return { id, name: 'Alice' }
  }
}

export default toNative(MyService)
// Calling fetchUser(42) logs:
// [API] Calling fetchUser with [42]
// [API] fetchUser returned { id: 42, name: 'Alice' }
```

--------------------------------

### Use Class Component in SFC

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/quick-start/quick-start.md

Replace the default exported options API in a Vue Single-File Component with a class component definition.

```text
import { Component, Vue } from 'vue-facing-decorator';

@Component
export default class App extends Vue {
  render() {
    return <div>Hello World</div>;
  }
}
```

--------------------------------

### Basic Component Usage

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Decorate a class extending Vue with the Component decorator to define a Vue component.

```typescript
import { Component } from 'vue-facing-decorator';

@Component
export default class App extends Vue {
  // ...
}
```

--------------------------------

### Component Stylesheet

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/quick-start/quick-start.md

CSS file for styling the component defined in the associated TS and TSX files.

```css
.container {
  padding: 10px;
  border: 1px solid #ccc;
}

```

--------------------------------

### Register Methods in @Component

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/changelog/v3.0.3.md

Demonstrates how to register methods within the @Component decorator in Vue. This is useful for defining component-specific logic.

```javascript
@Component({
    methods:{
        foo(){

        }
    }
})
```

--------------------------------

### Define Component with TSX Template

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/quick-start/quick-start.md

Define a component in a .ts file and import its template from a .tsx file for use in Vue projects.

```tsx
import './style.css';

export const Comp = {
  render() {
    return (
      <div class="container">
        <p>Hello World</p>
      </div>
    );
  },
};

```

--------------------------------

### Component Template Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Specify a template string for the component. Requires the full Vue bundle including the template compiler.

```typescript
import { Component } from 'vue-facing-decorator';

@Component({
  template: '<div>Hello from template</div>'
})
export default class App extends Vue {
  // ...
}
```

--------------------------------

### Define Class Component Methods

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/method/method.md

Define methods directly as class methods. The library analyzes these and transforms them into the `methods` option for Vue's options API.

```typescript
import { Component, Vue } from "vue-facing-decorator";

@Component
export default class MyComponent extends Vue {
  // Method defined as a class method
  greet() {
    console.log("Hello from class method!");
  }

  // Another method
  calculate(a: number, b: number): number {
    return a + b;
  }
}

```

--------------------------------

### Watcher with Flush Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/watcher/watcher.md

Control when the watcher callback is executed using the `flush` option. Options include `'pre'`, `'post'`, and `'sync'`.

```typescript
import { Watch } from 'vue-facing-decorator';

export class App {
  count: number = 0;

  @Watch('count', { flush: 'post' })
  onCountChanged(newValue: number, oldValue: number) {
    console.log('Count changed:', newValue, oldValue);
  }
}
```

--------------------------------

### Stage 3 Decorators Configuration

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Configuration for Stage 3 decorators in `tsconfig.json`. When using Stage 3, `toNative` must be called immediately after the class definition.

```json
// tsconfig.json for stage3 decorators
{
  "compilerOptions": {
    "experimentalDecorators": false
  }
}
```

```typescript
import { Component, Vue, Prop, Watch, toNative } from 'vue-facing-decorator'

// Stage3: toNative must be called immediately
@Component
class MyComponent extends Vue {
  @Prop({ required: true })
  title!: string

  @Watch('title', { immediate: true })
  onTitleChange(newVal: string) {
    document.title = newVal
  }
}

// Stage3 requirement: call toNative immediately after class definition
export default toNative(MyComponent)
```

--------------------------------

### Model Options: Other Prop Options

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/model/model.md

Additional options for the Model decorator are the same as those available for the Prop decorator, allowing for further customization of model behavior.

```typescript
import { Model } from 'vue-facing-decorator';

export class App {
    @Model({
        required: true,
        default: 0,
        validator: val => val >= 0
    })
    count!: number;
}
```

--------------------------------

### Deprecated Class Property Initialization in Constructor

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/changelog/v3.0.0.md

Initializing class properties based on props within the constructor is now deprecated and will result in `undefined` values. Use `toNative` to cast the component.

```typescript
import { Vue, Component, Prop } from "vue-facing-decorator";

@Component({
    name: "MyComponent"
})
export class MyComponent extends Vue {
    @Prop
    prop!: string

    field = this.prop // this is deprecated, it will be undefined
}

export default toNative(MyComponent)
```

--------------------------------

### Component Expose Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Define the public properties and methods exposed by the component using the 'expose' option.

```typescript
import { Component } from 'vue-facing-decorator';

@Component({
  expose: ['publicMethod']
})
export default class App extends Vue {
  publicMethod() {
    // ...
  }
}
```

--------------------------------

### Enable TSX Attribute Types

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/tsx/attribute-types/attribute-types.md

Import the TSX function and define interfaces for props and events to enable type checking for your components. Ensure your component extends TSX<Props, Events>().

```tsx
import { TSX } from "@you/tsx-decorator";

interface Props {
  name: string;
}

interface Events {
  change: string;
}

class BaseComponent {
  render() {
    return <div></div>;
  }
}

@TSX<Props, Events>()
class MyComponent extends BaseComponent {
  render() {
    return <div></div>;
  }
}

```

--------------------------------

### Using Standard Vue Lifecycle Hooks in Class Components

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/hooks/hooks.md

Implement standard Vue lifecycle hooks directly as class methods. Ensure these are methods, not properties.

```typescript
import { Component, Vue } from "vue-facing-decorator";

@Component
export default class MyComponent extends Vue {
  mounted() {
    console.log("Component has been mounted!");
  }

  updated() {
    console.log("Component has been updated!");
  }
}
```

--------------------------------

### Basic Model Usage

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/model/model.md

Use the Model decorator to define a model for vue `v-model` or `v-model:foo`. This decorator is an alias for the old `VModel` decorator.

```typescript
import { Model } from 'vue-facing-decorator';

export class App {
    // v-model
    @Model
    foo!: string;

    // v-model:foo
    @Model('bar')
    bar!: string;
}
```

--------------------------------

### Inject Decorator with 'from' Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/injection/injection.md

Specify the key to inject from using the `from` option, which corresponds to the `from` property in Vue's `inject` option. This allows you to inject a value under a different name than its original key.

```typescript
import { Component, Vue } from "vue-property-decorator";
import { Inject } from "vue-facing-decorator";

@Component
export default class MyComponent extends Vue {
  @Inject({ from: "bar" }) readonly foo!: string;
}
```

--------------------------------

### Component Render Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Provide a custom render function for the component. This will overwrite the render function in the class body if using Single-File Components.

```typescript
import { Component } from 'vue-facing-decorator';

@Component({
  render(h) {
    return h('div', 'Hello from render function');
  }
})
export default class App extends Vue {
  // ...
}
```

--------------------------------

### Component Components Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Register child components for use within the current component using the 'components' option.

```typescript
import { Component } from 'vue-facing-decorator';
import ChildComponent from './ChildComponent.vue';

@Component({
  components: {
    ChildComponent
  }
})
export default class App extends Vue {
  // ...
}
```

--------------------------------

### Property Type Checking with 'implements'

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/tsx/attribute-types/attribute-types.md

Use the 'implements' keyword to verify that a component correctly implements the defined properties. This ensures type safety at compile time.

```tsx
import { TSX } from "@you/tsx-decorator";

interface Props {
  name: string;
}

class BaseComponent {
  render() {
    return <div></div>;
  }
}

@TSX<Props>()
class MyComponent extends BaseComponent implements Props {
  render() {
    return <div></div>;
  }
}

```

--------------------------------

### Lifecycle Hooks

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Standard Vue lifecycle hooks can be used as plain class methods. For non-standard hook names, use the `@Hook` decorator. Lifecycle methods are not placed in `methods`.

```APIDOC
## Lifecycle Hooks

All standard Vue lifecycle hooks are supported as plain class methods — just define them with the correct name. Use the `@Hook` decorator for non-standard hook names (e.g., from `vue-router`). Lifecycle methods are NOT placed in `methods`.

```typescript
import { Component, Vue, Hook, toNative, HookMounted } from 'vue-facing-decorator'

@Component
class MyComponent extends Vue implements HookMounted {
  data = ''

  // Standard lifecycle hooks — no decorator needed
  beforeCreate() { console.log('beforeCreate') }
  created() { console.log('created') }
  mounted() { this.data = 'ready' }
  beforeUnmount() { console.log('cleanup') }
  unmounted() { console.log('destroyed') }

  // Non-standard hook (e.g. vue-router navigation guard)
  @Hook
  beforeRouteEnter() {
    console.log('route enter')
  }
}

export default toNative(MyComponent)
```
```

--------------------------------

### Component Definition in TS

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/quick-start/quick-start.md

This TypeScript file defines the component logic, which is then used with its associated TSX template.

```typescript
import Vue from 'vue';
import { Component, toNative } from 'vue-facing-decorator';
import { Comp } from './Comp.render';

@Component
export class App extends Vue {
  render() {
    return Comp.render();
  }
}

export default toNative(App);

```

--------------------------------

### Component Emits Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Define the events a component can emit using the 'emits' option.

```typescript
import { Component } from 'vue-facing-decorator';

@Component({
  emits: ['change', 'update']
})
export default class App extends Vue {
  // ...
}
```

--------------------------------

### Add Docsify Plugin for Page View Tracking

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/index.html

This snippet adds a Docsify plugin that uses Google Analytics (gtag) to track page views. It sends the current page path and a 'page_view' event whenever navigation is completed.

```javascript
window.$docsify.plugins = [].concat(
  function (hook) {
    hook.doneEach(function collect() {
      gtag('set', 'page_path', location.hash);
      gtag('event', 'page_view');
    })
  },
  $docsify.plugins
)
```

--------------------------------

### Component Name Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Set the 'name' option for a Vue component using the Component decorator.

```typescript
import { Component } from 'vue-facing-decorator';

@Component({
  name: 'my-component'
})
export default class App extends Vue {
  // ...
}
```

--------------------------------

### Extend a Single Component

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/inheritance/component/component.md

Use the `extends` option to inherit from a single component. This is useful for creating specialized versions of existing components.

```typescript
import { Component, Vue } from "vue-property-decorator";

@Component
export class SuperComponent extends Vue {
  superData = 1;
}

@Component({
  extends: SuperComponent
})
export class MyComponent extends Vue {
  mydata = 2;
}

const myComponent = new MyComponent();
console.log(myComponent.superData);
console.log(myComponent.mydata);
```

--------------------------------

### Basic Watcher Usage

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/watcher/watcher.md

Use the `Watch` decorator to define a watcher for a specific property. The watcher function receives the new and old values of the watched property.

```typescript
import { Watch } from 'vue-facing-decorator';

export class App {
  name: string = 'World';

  @Watch('name')
  onNameChanged(newValue: string, oldValue: string) {
    console.log(newValue, oldValue);
  }
}
```

--------------------------------

### Defining a Vanilla ES Setter

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/accessor/accessor.md

Use the @Vanilla decorator to define a standard ES vanilla setter. This is useful when you need direct control over the setter logic without Vue's computed property overhead.

```typescript
import { Component, Vanilla } from 'vue-facing-decorator';

@Component
export class App {
  @Vanilla
  set count(value: number) {
    // handle the value
  }
}
```

--------------------------------

### Vue Class Inheritance and Mixins

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Supports single inheritance via 'extends' and multiple inheritance using the 'mixins()' helper. Native Vue option API components can also be mixed in.

```typescript
import { Component, Vue, mixins, toNative } from 'vue-facing-decorator'
import { defineComponent } from 'vue'

// Base class
@Component({ name: 'BaseComponent' })
class BaseComponent extends Vue {
  baseData = 'from base'

  baseMethod() {
    return this.baseData
  }
}

// Mixin classes
@Component({ name: 'LoggingMixin' })
class LoggingMixin extends Vue {
  log(msg: string) { console.log('[Log]', msg) }
}

@Component({ name: 'AuthMixin' })
class AuthMixin extends Vue {
  isAuthenticated = false
}

// Single inheritance (uses Vue extends)
@Component
class ChildComponent extends BaseComponent {
  mounted() {
    console.log(this.baseMethod()) // 'from base'
  }
}

// Multiple inheritance via mixins()
@Component
class FullComponent extends mixins(LoggingMixin, AuthMixin) {
  mounted() {
    this.log('mounted')     // from LoggingMixin
    console.log(this.isAuthenticated) // from AuthMixin
  }
}

export default toNative(FullComponent)
```

--------------------------------

### Define Reactive Data Properties

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Class instance properties with initial values are automatically transformed into Vue reactive data properties. No separate data() function is required.

```typescript
import { Component, Vue, toNative } from 'vue-facing-decorator'

@Component
class CounterComponent extends Vue {
  count = 0
  label = 'Counter'
  items: string[] = []

  // Equivalent Vue options API:
  // data() { return { count: 0, label: 'Counter', items: [] } }
}

export default toNative(CounterComponent)
```

--------------------------------

### Component Mixins Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Include mixins in the component. Only native Vue components are accepted; use `toNative` for class components.

```typescript
import { Component } from 'vue-facing-decorator';
import NativeMixin from './NativeMixin';

@Component({
  mixins: [NativeMixin]
})
export default class App extends Vue {
  // ...
}
```

--------------------------------

### Using the `preserve` Option in Decorators

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/custom/custom.md

The `preserve` option in `createDecorator` determines whether the decorated value should be preserved before the decorator is applied. Setting `preserve` to `false` means the original value will not be accessible after the decorator runs.

```typescript
import { createDecorator } from 'vue-facing-decorator';

export const MyDecorator = createDecorator({
  // preserve: true (default)
  // preserve: false
}, (options, key) => {
  // ...
});
```

--------------------------------

### Using the Hook Decorator for Custom Hooks

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/hooks/hooks.md

Utilize the `@Hook` decorator to integrate hooks not automatically recognized, such as those from vue-router. This allows custom hook names to be correctly processed.

```typescript
import { Component, Vue, Hook } from "vue-facing-decorator";

@Component
export default class MyComponent extends Vue {
  @Hook("beforeRouteEnter")
  onBeforeRouteEnter() {
    console.log("Navigating to this route...");
  }
}
```

--------------------------------

### Extend Multiple Components with Mixins

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/inheritance/component/component.md

Utilize the `mixins` function to combine properties and methods from multiple components. This allows for greater code reuse and modularity.

```typescript
import { Component, Vue, mixins } from "vue-facing-decorator";

class MixinA extends Vue {
  mixinAData = 1;
}

class MixinB extends Vue {
  mixinBData = 2;
}

@Component
export class MyComponent extends mixins(MixinA, MixinB) {
  mydata = 3;
}

const myComponent = new MyComponent();
console.log(myComponent.mixinAData);
console.log(myComponent.mixinBData);
console.log(myComponent.mydata);
```

--------------------------------

### Defining a Vanilla ES Getter

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/accessor/accessor.md

Use the @Vanilla decorator to define a standard ES vanilla getter. This bypasses Vue's computed property transformation.

```typescript
import { Component, Vanilla } from 'vue-facing-decorator';

@Component
export class App {
  @Vanilla
  get count() {
    return 1;
  }
}
```

--------------------------------

### Watcher with Deep Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/watcher/watcher.md

Enable deep watching of nested properties by setting the `deep` option to `true`. This is useful when observing objects or arrays.

```typescript
import { Watch } from 'vue-facing-decorator';

export class App {
  user: { name: string } = { name: 'John' };

  @Watch('user', { deep: true })
  onUserChanged(newValue: { name: string }, oldValue: { name: string }) {
    console.log(newValue.name, oldValue.name);
  }
}
```

--------------------------------

### Define Computed Properties (Accessors)

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Class property getters become Vue computed getters, and setters become writable computed setters. Use @Vanilla to define plain ES getters/setters not intended for Vue computed properties.

```typescript
import { Component, Vue, Vanilla, toNative } from 'vue-facing-decorator'

@Component
class MyComponent extends Vue {
  firstName = 'John'
  lastName = 'Doe'

  // Becomes Vue computed getter
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`
  }

  // Becomes Vue computed setter
  set fullName(value: string) {
    const parts = value.split(' ')
    this.firstName = parts[0]
    this.lastName = parts[1]
  }

  // Plain ES getter — NOT a Vue computed property
  @Vanilla
  get rawId(): string {
    return Math.random().toString(36)
  }
}

export default toNative(MyComponent)
```

--------------------------------

### Define Reactive Data with Class Properties

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/property/property.md

Use class properties to declare reactive data in Vue class components. The library analyzes these properties and converts them into the return value of the `data` function.

```typescript
import { Component, Vue } from "vue-property-decorator";

@Component
export default class MyComponent extends Vue {
  // This property will be reactive
  message: string = "Hello, Vue!";

  // Another reactive property
  count: number = 0;
}

```

--------------------------------

### Define Methods in Class Components

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Regular class methods are transformed into Vue component methods accessible via 'this'. Lifecycle hooks and decorated methods are handled separately.

```typescript
import { Component, Vue, toNative } from 'vue-facing-decorator'

@Component
class MyComponent extends Vue {
  count = 0

  increment() {
    this.count++
  }

  reset() {
    this.count = 0
  }

  getDoubled(): number {
    return this.count * 2
  }
}

export default toNative(MyComponent)
```

--------------------------------

### Component Options Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Assign custom options to the Vue options API before the modifier is applied. This option is specific to vue-facing-decorator.

```typescript
import { Component } from 'vue-facing-decorator';

@Component({
  options: {
    customOption: 'value'
  }
})
export default class App extends Vue {
  // ...
}
```

--------------------------------

### Asynchronous Event Handling with Emit Decorator

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/event/event.md

When an event method returns a Promise, the Emit decorator waits for the Promise to resolve before triggering the event. The event is then triggered with the resolved value of the Promise.

```typescript
import { Vue, Component, Emit } from 'vue-facing-decorator';

@Component
export class MyComponent extends Vue {
  @Emit('update-async')
  async updateAsync(newVal: string): Promise<string> {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(newVal);
      }, 1000);
    });
  }
}
```

--------------------------------

### Basic Inject Decorator Usage

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/injection/injection.md

Use the `Inject` decorator to define an injected value from Vue's `inject` option. This is the standard way to inject dependencies into your class components.

```typescript
import { Component, Vue } from "vue-property-decorator";
import { Inject } from "vue-facing-decorator";

@Component
export default class MyComponent extends Vue {
  @Inject() readonly foo!: string;
}
```

--------------------------------

### Define Type for Component Property

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component-property/component-property.md

Set the expected data type for a component property using the `type` option. This helps with type checking and ensuring data integrity.

```typescript
import { Component, Prop } from 'vue-facing-decorator';

@Component
export class MyComponent {
  @Prop({ type: Number })
  age: number;
}
```

--------------------------------

### Emit Decorator Usage

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/event/event.md

Use the Emit decorator to trigger a Vue event with a specified name and the method's return value. If no event name is provided, the method's name is used by default.

```typescript
import { Vue, Component, Emit } from 'vue-facing-decorator';

@Component
export class MyComponent extends Vue {
  @Emit('change')
  update(newVal: string): string {
    return newVal;
  }

  @Emit()
  reset() {
    // event name will be 'reset'
  }
}
```

--------------------------------

### Merge Vue Native Components with Mixins

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/inheritance/component/component.md

Use `mixins` to merge Vue native components (defined with Vue's Options API) into a component. Note that type information from Vue native components may be lost, requiring explicit type context.

```typescript
import { Component, Vue, mixins } from "vue-facing-decorator";

const VueNativeComponent = Vue.extend({
  data() {
    return {
      nativeData: 1
    };
  }
});

@Component
export class MyComponent extends mixins(VueNativeComponent) {
  mydata = 2;
}

const myComponent = new MyComponent();
console.log(myComponent.nativeData);
console.log(myComponent.mydata);
```

--------------------------------

### Cast Class Component to Vue Options API with toNative

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/changelog/v3.0.0.md

Use `toNative` to cast a class component to Vue's options API. This is recommended for stability, although currently not strictly necessary.

```typescript
import { Vue, Component } from "vue-facing-decorator";

@Component
export class MyComp extends Vue {}
export default toNative(MyComp)

//Code also works currently:
@Component
export default class MyComp extends Vue {}
```

--------------------------------

### `@Emit` — Emit Events

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

The `@Emit` decorator marks a method to emit a Vue event. The event name defaults to the method name, and the method's return value becomes the event payload. Async methods emit after the promise resolves.

```APIDOC
## `@Emit` — Emit Events

The `@Emit` decorator marks a method to emit a Vue event. The event name defaults to the method name; pass a string to use a custom event name. The method's return value becomes the event payload. Async methods emit after the promise resolves.

```typescript
import { Emit, Component, Vue, toNative } from 'vue-facing-decorator'

@Component
class ButtonComponent extends Vue {
  // Emits event named 'triggerClick' with payload 'clicked'
  @Emit
  triggerClick() {
    return 'clicked'
  }

  // Emits event named 'submit' with form data
  @Emit('submit')
  handleSubmit() {
    return { username: 'alice', password: '***' }
  }

  // Emits after async operation resolves
  @Emit
  async fetchData() {
    const data = await fetch('/api/data').then(r => r.json())
    return data  // emitted as payload after promise resolves
  }
}

export default toNative(ButtonComponent)
// Usage: <ButtonComponent @submit="onSubmit" @fetchData="onData" />
```
```

--------------------------------

### Inject Decorator with 'default' Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/injection/injection.md

Provide a default value for the injected property using the `default` option, mirroring Vue's `inject` option's `default` behavior. This ensures the property has a value even if the injection key is not found.

```typescript
import { Component, Vue } from "vue-property-decorator";
import { Inject } from "vue-facing-decorator";

@Component
export default class MyComponent extends Vue {
  @Inject({ default: "hello" }) readonly foo!: string;
}
```

--------------------------------

### Emit Events with @Emit

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Use the `@Emit` decorator to mark a method for emitting a Vue event. The event name defaults to the method name, or can be specified. The method's return value is the event payload.

```typescript
import { Emit, Component, Vue, toNative } from 'vue-facing-decorator'

@Component
class ButtonComponent extends Vue {
  // Emits event named 'triggerClick' with payload 'clicked'
  @Emit
  triggerClick() {
    return 'clicked'
  }

  // Emits event named 'submit' with form data
  @Emit('submit')
  handleSubmit() {
    return { username: 'alice', password: '***' }
  }

  // Emits after async operation resolves
  @Emit
  async fetchData() {
    const data = await fetch('/api/data').then(r => r.json())
    return data  // emitted as payload after promise resolves
  }
}

export default toNative(ButtonComponent)
// Usage: <ButtonComponent @submit="onSubmit" @fetchData="onData" />
```

--------------------------------

### Lifecycle Hooks

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Standard Vue lifecycle hooks can be defined as plain class methods. Use the `@Hook` decorator for non-standard hook names, such as those from `vue-router`. Lifecycle methods are not placed in `methods`.

```typescript
import { Component, Vue, Hook, toNative, HookMounted } from 'vue-facing-decorator'

@Component
class MyComponent extends Vue implements HookMounted {
  data = ''

  // Standard lifecycle hooks — no decorator needed
  beforeCreate() { console.log('beforeCreate') }
  created() { console.log('created') }
  mounted() { this.data = 'ready' }
  beforeUnmount() { console.log('cleanup') }
  unmounted() { console.log('destroyed') }

  // Non-standard hook (e.g. vue-router navigation guard)
  @Hook
  beforeRouteEnter() {
    console.log('route enter')
  }
}

export default toNative(MyComponent)
```

--------------------------------

### Transform Class Component to Native Vue

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/quick-start/quick-start.md

Use `toNative` to convert a class component into a native Vue options API component, which can then be used by Vue.

```typescript
import Vue from 'vue';
import { Component, toNative } from 'vue-facing-decorator';

@Component
export class MyComponent extends Vue {
  message: string = 'Hello from class component!';

  render() {
    return <div>{this.message}</div>;
  }
}

export default toNative(MyComponent);

```

--------------------------------

### Define Component Property with Prop Decorator

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component-property/component-property.md

Use the `Prop` decorator to define a property for your Vue component. This is the basic usage for declaring props.

```typescript
import { Component, Prop } from 'vue-facing-decorator';

@Component
export class MyComponent {
  @Prop
  name: string;
}
```

--------------------------------

### TSX Attribute Types with TSX<Props, Events>()

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

Enable full TypeScript type checking for TSX/JSX attributes and event handlers by extending from TSX<Props, Events>()(Vue). Define separate interfaces for props and events.

```typescript
import { TSX, Prop, Emit, Component, Vue, toNative } from 'vue-facing-decorator'

interface Props {
  label: string
  disabled?: boolean
}

interface Events {
  click: Function
  change: string  // transformed to onChange: (param: string) => any
}

@Component
class TypedButton extends TSX<Props, Events>()(Vue) {
  @Prop({ required: true })
  label!: string

  @Prop({ default: false })
  disabled!: boolean

  @Emit('click')
  handleClick() {
    return undefined
  }

  @Emit('change')
  handleChange() {
    return 'new value'
  }
}

const Comp = toNative(TypedButton)

// TypeScript enforces attribute types in TSX:
function render() {
  return (
    <Comp
      label="Click me"
      disabled={false}
      onClick={() => console.log('clicked')}
      onMyChange={(v: string) => console.log(v)}
    />
  )
}
```

--------------------------------

### Cast Class Component to Vue Options API with toNative

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/migration/from-v2-to-v3.md

Use the `toNative` utility to transform a class component into a Vue options API component. This allows the transformed component to be used anywhere a native Vue component is accepted.

```typescript
import { toNative } from 'vue-facing-decorator';
import Component from './Component';

export default toNative(Component);

```

--------------------------------

### Define Component Reference with Ref Decorator

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/reference/reference.md

Use the `Ref` decorator to define a property getter that accesses `this.$refs[name]` on a Vue component instance. The reference name is derived from the property name or a provided parameter.

```typescript
import { Component, Ref } from 'vue-facing-decorator';

class MyComponent extends Component {
  @Ref()
  myInput!: HTMLInputElement;

  @Ref('anotherName')
  anotherElement!: HTMLDivElement;

  mounted() {
    this.myInput.focus();
    this.anotherElement.style.color = 'red';
  }
}

```

--------------------------------

### Component Directives Option

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component/component.md

Register custom directives for use within the current component using the 'directives' option.

```typescript
import { Component } from 'vue-facing-decorator';

@Component({
  directives: {
    // ...
  }
})
export default class App extends Vue {
  // ...
}
```

--------------------------------

### Set Default Value for a Component Property

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/class-component/component-property/component-property.md

Configure a default value for a component property using the `default` option within the `Prop` decorator. This ensures the prop has a value even if not provided by the parent.

```typescript
import { Component, Prop } from 'vue-facing-decorator';

@Component
export class MyComponent {
  @Prop({ default: 'Default Name' })
  name: string;
}
```

--------------------------------

### Component Inheritance with TSX Attributes

Source: https://github.com/facing-dev/vue-facing-decorator/blob/master/docs/en/tsx/attribute-types/attribute-types.md

TSX attributes support component inheritance, allowing you to extend base components while maintaining type safety for attributes. Ensure the extended component also adheres to the TSX decorator.

```tsx
import { TSX } from "@you/tsx-decorator";

interface BaseProps {
  baseProp: boolean;
}

interface MyProps {
  myProp: string;
}

class BaseComponent {
  render() {
    return <div></div>;
  }
}

@TSX<BaseProps>()
class Base extends BaseComponent {}

@TSX<MyProps>()
class MyComponent extends Base {
  render() {
    return <div></div>;
  }
}

```

--------------------------------

### `@Watch` — Watchers

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

The `@Watch` decorator registers a Vue watcher on a reactive property. It supports `deep`, `immediate`, and `flush` options, and multiple watchers can be applied to the same property.

```APIDOC
## `@Watch` — Watchers

The `@Watch` decorator registers a Vue watcher on a reactive property. Multiple watchers can be applied to the same property. Supports `deep`, `immediate`, and `flush` options.

```typescript
import { Watch, Component, Vue, toNative } from 'vue-facing-decorator'

@Component
class FormComponent extends Vue {
  query = ''
  filters = { active: true, page: 1 }

  // Simple watcher
  @Watch('query')
  onQueryChange(newVal: string, oldVal: string) {
    console.log(`Query changed from "${oldVal}" to "${newVal}"`) 
  }

  // Deep watcher — fires on nested changes
  @Watch('filters', { deep: true })
  onFiltersChange(newVal: object) {
    console.log('Filters updated:', newVal)
  }

  // Immediate — fires on component creation
  @Watch('query', { immediate: true })
  onQueryImmediate(newVal: string) {
    console.log('Initial query:', newVal)
  }
}

export default toNative(FormComponent)
```
```

--------------------------------

### Register Watchers with @Watch

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

The `@Watch` decorator registers a Vue watcher on a reactive property. Supports `deep`, `immediate`, and `flush` options. Multiple watchers can be applied to the same property.

```typescript
import { Watch, Component, Vue, toNative } from 'vue-facing-decorator'

@Component
class FormComponent extends Vue {
  query = ''
  filters = { active: true, page: 1 }

  // Simple watcher
  @Watch('query')
  onQueryChange(newVal: string, oldVal: string) {
    console.log(`Query changed from "${oldVal}" to "${newVal}"`)
  }

  // Deep watcher — fires on nested changes
  @Watch('filters', { deep: true })
  onFiltersChange(newVal: object) {
    console.log('Filters updated:', newVal)
  }

  // Immediate — fires on component creation
  @Watch('query', { immediate: true })
  onQueryImmediate(newVal: string) {
    console.log('Initial query:', newVal)
  }
}

export default toNative(FormComponent)
```

--------------------------------

### `@Model` — v-model Binding

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

The `@Model` decorator defines a two-way binding for `v-model` or `v-model:name`. It creates a computed getter/setter backed by a prop and automatically emits `update:modelValue` (or `update:<name>`).

```APIDOC
## `@Model` — v-model Binding

The `@Model` decorator defines a two-way binding for `v-model` or `v-model:name`. It creates a computed getter/setter backed by a prop and automatically emits `update:modelValue` (or `update:<name>`).

```typescript
import { Model, Component, Vue, toNative } from 'vue-facing-decorator'

@Component
class TextInput extends Vue {
  // Default: v-model (modelValue prop)
  @Model
  value!: string
}

@Component
class RangeSlider extends Vue {
  // Named: v-model:amount
  @Model({ name: 'amount' })
  sliderValue!: number
}

export default toNative(TextInput)
// Usage: <TextInput v-model="myText" />
// Usage: <RangeSlider v-model:amount="price" />
```
```

--------------------------------

### Use @Component Decorator

Source: https://context7.com/facing-dev/vue-facing-decorator/llms.txt

The @Component decorator transforms an ES class extending Vue into a Vue options API component. It accepts an optional configuration object for Vue options API fields.

```typescript
import { Component, Vue, toNative } from 'vue-facing-decorator'
import { defineComponent } from 'vue'

const NativeButton = defineComponent({ name: 'NativeButton' })

@Component({
  name: 'MyComponent',
  emits: ['change', 'submit'],
  components: { NativeButton },
  setup() {
    return { setupKey: 'value from setup' }
  }
})
class MyComponent extends Vue {
  setupKey!: string  // populated by setup()

  mounted() {
    console.log(this.setupKey) // 'value from setup'
  }
}

export default toNative(MyComponent)
```