[Vuejs]-Create a chat plugin for HTML using VueJs

by

1👍

✅

I solved this problem by building the VueJs file and removing the , , , from the built file and then importing it into any HTML file using:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="floating-chat"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
axios.get('https://dfe43d80.ngrok.io/views').then(({data})=>{
    $('#floating-chat').html(data);
}).catch(err=>console.log(err));
</script>

Don’t forget to replace all the links from the server and use express.static

app.use(express.static(__dirname+'/dist'));

fs.readFile(__dirname + '/dist/index.html', 'utf8', (err, html)=>{
    if(err){
        console.log(err);
    }
    html.replace('href=/js',`href=https://YOURWEBISTE.COM/js`);
    html.replace('href=/css',`href=https://YOURWEBISTE.COM/css`);
    html.replace('src=/js',`src=https://YOURWEBISTE.COM/js`);
    console.log(html);
    res.send(html);
});

And use CORS to let other pages import your HTML content.

👤Rohit Nair

Leave a comment