Using Vue Components in Angular

by

Wrap your Vue components as native Web Components.

Since Angular supports using custom Web Components, you’ll be able to use the Vue components (wrapped as Web Components).

To Angular it doesn’t make a difference if the custom Web Components were generated by Vue or not (for all Angular knows, they could be native HTML elements).

Demo

Runnable DEMO here.

The demo is an Angular 5 app. The Vue custom component is defined in index.html. Notice how in app/app.component.html it is used directly in the template, as if it were a native element.

Step by step below.

In Vue

Use vue-custom-element to wrap your Vue components as Web Components:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-custom-element.js"></script>
<script>
  const MyVueWebComp = {
    props: ['msg'],
    template:`
    <div style="border: 3px dashed green; padding: 5px">
      I am my-vue-web-comp.<br>
      Value of "msg" prop: {{ msg }}<br>
      <input v-model="text"><button @click="addText">Click me</button>
      <div v-for="t in texts">
        Text: {{ t }}
      </div>
    </div>
    `,
    data() {
        return {
            text: '',
            texts: []
        };
    },
    methods: {
      addText() {
        this.texts.push(this.text);
        this.text="";
      }
    }
  };
  Vue.customElement('my-vue-web-comp', MyVueWebComp);
</script>

That will create a <my-vue-web-comp> web component that can be used directly in the DOM, without the need to have a working Vue instance.

The above is just a demo runnable directly in the browser. If you have .vue files and a vue-cli app, you’ll need to do npm install vue-custom-element --save and then create a .js file like:

import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';
import MyElement from './MyElement.vue';

Vue.use(vueCustomElement);
Vue.customElement('my-element', MyElement);

And then this, when bundled, will generate a .js file that can be imported directly as a single <script> tag, instead of the whole code and script tags above.

For more details, check vue-custom-element‘s docs.

In Angular

Now, in the Angular app, after importing the Web Components (being them Vue-generated or not), configure them to be used by Angular by adding schemas: [CUSTOM_ELEMENTS_SCHEMA] in your @NgModule:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

//...

@NgModule({
  // ...
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA  // added this
  ]
})
export class AppModule {

Now use the Web Components (generated from Vue or not) directly in Angular templates. E.g. the component defined in the code above could be used like:

<my-vue-web-comp [msg]="name"></my-vue-web-comp>

In fact, the runnable demo shows an example of that usage.

Limitations

You may need polyfills for older browser support. Please check vue-custom-element‘s docs for more details.

Leave a Comment