Create Vue widget and inject it in any javaScript application like Angular React and Vue itself

For a long time, I was thinking to create a simple social share widget and use it for my blog. As of now, I have not had this feature, and visitors might like my article and wanted to share it with other people. But I have another web application (called books.lazypandatech.com) there also I wanted to give share options. The book's application was written in NextJs (React) and my blog application is written in Angular. So I thought to use VueJs to create the social share widget and use the widget in both the application.

Use case: Create a social share widget using Vue and use the widget in the Angular & NextJs (React) application

Step 1: Create a Vue with TypeScript application

I have created a simple vue with a typescript application using vue cli. For more details, you have to check this link on how to create vue application and use bootstrap, SCSS.

check this out: How to create the first Vue with TypeScript Application

Step 2: Create a simple TS file and configure Options, mount and unmount feature

Please create a simple .ts file under src folder and create a few method like setOptions, mount and unmount like method. Let's see how it looks like.

Step 3: Update your App.vue file and extend the data property as an Options

In this step, I was thinking on how many data I need to send to my Vue app externally. I wanted to share the WebPage URL and Button Text. So I set two property under Options for URL and text.

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')

I am going to set the data out side vue application like below

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

setOption('shareTxt', 'Share');

Step 4: How to read the external data and use in Vue application

I have set the Options with two external properties and have been sending the data through it. But how do I access those. For that I depends on $options, let's see how it looks like.

Step 5: Compilation and umd build creation

Now I am going to create an umd build and generate minified build of my vue application. You can referer this documentation as well. Vue umd build generation.

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

After successful compilation, under dist folder the umd build will create, that build can be used in any project. For more integration and working example please watch the video demosntration.