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.

The already uploaded social share library is already hosted. 

<script async src="https://lazypandatech.com/assets/share-script/lpShare.umd.min.js"></script>

<link rel="stylesheet" href="https://lazypandatech.com/assets/share-script/lpShare.css"></link>

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>

 

in your js file - may be react or angular file, you need to add this following code snippets

if (typeof window !== 'undefined') {

const url = window.location.href;

lpShare.setOption('postUrl', url);

lpShare.setOption('shareTxt', '');

lpShare.mount('#lpshare');

}

 

Thanks,

Happy Coding!