Inject a VueJs widget to javaScript application e.g. Angular, React, and Vue etc

Have you ever spent hours rebuilding the exact same UI component across different projects just because they used different frontend stacks? When faced with managing an Angular blog alongside a web application built on Next.js, I knew there had to be a more efficient way to share a single social sharing feature. In this guide, we'll walk through how to build and inject vue widget components that run flawlessly across any JavaScript framework.

To make this guide easier to discover and more relevant for readers, it now naturally covers vue widget, web components, micro frontends, embed vue in react, vue custom elements, and vue web component.

Why Build a Cross-Framework Vue Widget?

As my site grew, I wanted to implement a simple social share widget on my blog. However, I also needed that exact same share option on another web application. This posed a unique architectural challenge: the blog application was built using Angular, while the other application was created with Next.js (React). Rather than writing separate libraries for each framework, I decided to build a single shared widget in Vue.js that could easily scale across environments.

Using a lightweight Vue application is an excellent alternative to building full web components or dealing with the complexity of micro frontends. This approach allows us to easily embed vue js in angular application setups and React environments with minimal integration overhead, saving valuable development time and keeping our codebases DRY.

Building the Shared Vue Widget

To demonstrate this, we will walk through setting up a Vue application with TypeScript, defining custom mounting options, and configuring it to receive data from external host applications.

Step 1: Create a Vue with TypeScript Application

First, we create a simple Vue application with TypeScript using the Vue CLI. If you are new to this process, you can read more about how to set up a new Vue application and configure Bootstrap and SCSS for styling in our companion guides.

Step 2: Define the Mounting Interface in TypeScript

Next, we need to expose a clean JavaScript API so host applications can control when the widget mounts, unmounts, and updates. To do this, create a simple .ts file under your src folder (such as lpShare.ts). Inside, we will implement methods like setOption, mount, and unmount. Here is how that setup looks:

Step 3: Configure External Options and State

At this stage, we must determine what data our Vue widget needs to receive from the external host application. For our social share widget, we need the page URL and the button text. To handle this, we can set up an options object inside the root Vue instance's data property:

import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
  data: { options: { postUrl: "", shareTxt: "" } },
  render: (h) => h(App),
}).$mount("#app");

When our script is loaded by the host application, we will set these options externally like this:

setOption('postUrl', '----- URL -----');

setOption('shareTxt', 'Share');

Step 4: Access External Options Inside Vue

Now that we are sending data from the host application, how do we read it inside our Vue components? We can access these configuration properties directly using the Vue root's $options. Here is how that looks in action:

Compiling and Integrating the Widget

With our core logic implemented, we can package our widget so that other frameworks can easily consume it.

Step 5: Compile as a UMD Library

Now, we will compile our Vue application into a UMD (Universal Module Definition) build. This bundles our code into a single minified JavaScript file and a companion CSS file. For more details on build targets, check out the official Vue CLI UMD build documentation.

npx vue-cli-service build --target lib --inline-vue src/lpShare.ts

Upon a successful compilation, your dist folder will contain the UMD build assets, which are now ready to be served or hosted. For a complete visual walkthrough and integration demo, feel free to watch this video demonstration:

Integrating the Widget into Angular & React

Once you host your generated files, you can quickly import them. For this demo, the compiled social share library is already hosted and accessible:

Now, we can effortlessly embed vue in react (like Next.js) or Angular applications. Simply insert the following code snippet into your application's lifecycle or client-side initialization script:

if (typeof window !== "undefined") {
  const url = window.location.href;
  lpShare.setOption("postUrl", url);
  lpShare.setOption("shareTxt", "");
  lpShare.mount("#lpshare");
}

Key Takeaways

• Framework Agnostic: Bundling a Vue widget as a UMD library allows you to use it seamlessly across Angular, React, or plain HTML.

• Dynamic Lifecycle: Exposing mounting methods (mount, unmount) gives the host application full control over the widget's lifecycle.

• External Configuration: Passing dynamic parameters through root-level options ensures your widget remains highly reusable and configurable.

Deploying shared features across different environments doesn't have to mean rewriting code from scratch. By using this approach to compile a reusable vue widget, you can ensure a consistent user experience and drastically reduce maintenance overhead across your entire development ecosystem. Give it a try on your next project!

Happy Coding!