Introduction
Use Angular Custom Element in Vue.js

Use Angular Custom Element in Vue.js

In a previous article, we discussed Custom Elements with Angular. In this article, we'll now see how to use such custom elements outside Angular and in a supposedly competing framework, Vue.js.

Setup the project

To start a Vue.js application, first, let's go ahead and install the Vue.js CLI: npm i -g @vue/cli.

Once this is done, we can create a new project: vue create custom-element (select the defaults).

Create the application

The CLI creates the shell of the application with some components already in place. For demonstration purposes, we'll only use the App.vue so let's go ahead and update it, so it looks like this:

<template>
  <div id="app">
    <app-greeter name="John"></app-greeter>
  </div>
</template>

<script>

export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Notice how we are using our custom element inside the Vue template.

The last thing we need to do is to grab the JavaScript file generated in the previous article and copy it to the public folder (this is the folder where Vue.js has it's index.thml file.)

The final index.html file should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>custom-element</title>
    <script src="app-greeter.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but custom-element doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Notice the inclusion of the app-greeter.js file in there.

Running the app

Now, run the app with npm run serve, and we should see our custom element in the browser.

Conclusion

In this article, we saw how to add a custom element created in an Angular application to a Vue.js project. This enables excellent interoperability between these two, popular frameworks. Going forward, I expect to see more such interoperability between the various frameworks, and custom elements are just the beginning of an exciting journey.

Author

Tamas Piros

Developer Evangelist, experienced Technical Trainer and Google Developer Expert in Web Technologies. Active conference speaker, passionate about the latest & greatest advancements in web technologies.

View Comments
Next Post

RESTful API Design - The basics

Previous Post

Create and use Custom Elements with Angular