I'm Rails developer and new in Vue JS framework. I created a toy Vue app for chat. I will want write integration code. This code embeded on customer website should fetch Vue app and it should add chat functionality to this website.
I'm thinking of something like below code:
<script type="text/javascript" >
(function (srcjs) {
window.vue_app = window.vue_app || {};
vue_app.app_id = 'YOUR APP_ID';
var doc = document.createElement('script');
doc.type = 'text/javascript';
doc.async = true;
doc.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + srcjs;
doc.src = srcjs;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(doc, s);
})("..toy_app/api.js");
</script>
I can't find any tutorial for this example. Do somebody with many experience help me how to do it?
For easiest example I used Vue external library in pure HTML.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="chat_app" class="colorRed">
<span v-show="this.open">open</span>
<div @click="toggleChatbot()" class="chatIcon">
</div>
</div>
<div v-show="this.open" class="chatContentContainer">
<div class="chatHeader">Title </div>
<div class="chatMain">
Content
</div>
<div class="chatFooter">chatBot™ </div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#chat_app',
data: function() {
return {
message: 'Hello Vue!',
open: false,
notRead: true,
};
},
methods: {
openChatbot: function() {
this.open = true;
},
closeChatbot: function() {
this.open = false;
},
toggleChatbot: function() {
this.open = !this.open;
console.log('click');
this.notRead = false;
}
},
created: function(){
var currentUrl = window.location.pathname;
console.log(currentUrl);
}
});
</script>
<style>
.colorRed {
color: red;
}
</style>
</body>
</html>