DEV Community

Aleksandr Ippatev
Aleksandr Ippatev

Posted on

How to use the vue component in an angular project

Vue 3.2 introduces a new defineCustomElement method for easily creating native custom elements using Vue component APIs:

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // normal Vue component options here
})

// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)
Enter fullscreen mode Exit fullscreen mode

This API allows develpers to create Vue-powered UI component libraries that can be used with any framework, or no framework at all. We have also added a new section in our docs on consuming and creating Web Components in Vue.

Angular (forked)
Let's do it.
Here in the angular main html template, we add a vue custom component:

<script src="https://unpkg.com/vue@next"></script>
<!-- <script src="https://unpkg.com/vue-custom-element@3.0.0/dist/vue-custom-element.js"></script> -->
<script>
  const MyVueWebComp = Vue.defineCustomElement({
    props: ['msg'],
    template:`
    <div style="border: 3px dashed green; padding: 5px">
      I am my-vue-web-comp.<br>
      Value received via "msg" prop: {{ msg }}<br>
      <input v-model="text"><button @click="addText">Type something and 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 = '';
      }
    }
  })
  customElements.define('my-vue-web-comp', MyVueWebComp);
</script>

<my-app>loading</my-app> // my-app is app.component
Enter fullscreen mode Exit fullscreen mode

And add CUSTOM_ELEMENTS_SCHEMA on app.module.ts

// app.module.ts
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA // Added for custom elements support
  ]
Enter fullscreen mode Exit fullscreen mode

And that's it, we can use our vue component, inside the angular project

// app.component
<h3>Hello, {{ name }}</h3>

<p>In index.html, a Vue component is defined using Vue and is wrapped into a Web Component using vue-custom-element.<br>

Now, in Angular's template, use it as if it were a native HTML Element (or regular native Web Component).
</p>

<my-vue-web-comp [msg]="name"></my-vue-web-comp>
Enter fullscreen mode Exit fullscreen mode

View code on github
Preview on StackBlitz

Discussion (0)