Soy desarrollador de Rails y nuevo en Vue JS framework. Creé una aplicación Toy Vue para chatear. Querré escribir el código de integración . Este código incrustado en el sitio web del cliente debe obtener la aplicación Vue y debe agregar la funcionalidad de chat a este sitio web.
Estoy pensando en algo como el siguiente código:
<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>No puedo encontrar ningún tutorial para este ejemplo. Alguien con mucha experiencia me ayuda como hacerlo?
Para el ejemplo más fácil, utilicé la biblioteca externa Vue en HTML puro.
<!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>