NgxVue

Use Vue Composition API in Angular components

npm i ngx-vue

The Vue Composition API is awesome!
Angular's pretty rad too.
Let's combine them and utilize them both!

Usage

import {
  ChangeDetectorRef,
  Component,
  ComponentFactoryResolver,
  Input,
  OnChanges
} from '@angular/core';
import {computed, ref, SetupComp, OnSetup} from 'ngx-vue';

@Component({
  selector: 'test-setup',
  template: `
    <p>{{other}}</p>
    <p>{{comp}}</p>
  `
})
class TestComponent implements OnSetup extends SetupComp {
    // In order to get typechecking working, defaults like these are required
    // Don't worry - they'll be overwritten by the `@Setup` return
    helloMsg: string = '';
    mainNumber: number = 0;
    addToPlus: Function = () => {};
    @Input() hello = 'Hello';

    // These two items in your constructor are required, currently
    // https://github.com/oceanbit-dev/ngx-vue/issues/1
    constructor(cd: ChangeDetectorRef, componentFactoryResolver: ComponentFactoryResolver) {
        super(cd, componentFactoryResolver)
    }

    ngOnSetup(props) {
      const helloProp = toRef(props, 'hello');
  
      const helloMsg = computed(() => `${helloProp?.value?.substr(0, 5) || ''}, World`);
  
      const mainNumber = ref(12);
  
      const addToPlus = (): void => {
        mainNumber.value += 1;
        // This manual change detection is required currently, but soon will not be
        detectChanges();
      };
  
      return {
        helloMsg,
        mainNumber,
        addToPlus
      };
    }
}

Using Vue's Libraries

Yes, you can! Before you start, you need set alias in your build tool in order to redirect some apis from vue to ngx-vue to avoid memory leaks.

Aliasing

Angular CLI

Unfortunately, there is no way to alias a library from within `node_modules` using Angular CLI itself.

Currently, you have to utilize an Angular Custom Webpack Builder and follow the webpack instructions

Webpack

Add following code to your webpack config

const config = { 
  /* ... */
  resolve: { 
    alias: { 
      'vue': 'ngx-vue',
      '@vue/runtime-dom': 'ngx-vue',
    },
  }
}