vue-quick-chat/src/node_modules/.cache/vue-loader/6c8ddac9ff43448aeb2da88e0583e23f.json

This vue component is a simple chat that can be easily imported and used in your project.

{"remainingRequest":"/home/matheus/vue-projects/vue-quick-chat/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/matheus/vue-projects/vue-quick-chat/src/App.vue?vue&type=script&lang=js&","dependencies":[{"path":"/home/matheus/vue-projects/vue-quick-chat/src/App.vue","mtime":1567036268654},{"path":"/home/matheus/vue-projects/vue-quick-chat/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/home/matheus/vue-projects/vue-quick-chat/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/matheus/vue-projects/vue-quick-chat/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n\nimport Chat from './components/Chat.vue'\nimport moment from 'moment'\nexport default {\n  name: 'app',\n  components: {\n    Chat\n  },\n  created(){\n    moment.locale('pt-br')\n  },\n  data(){\n    return {\n      participants: [\n        {\n          name: 'Arnaldo',\n          id: 1\n        },\n        {\n          name: 'José',\n          id: 2\n        }\n      ],\n      myself: {\n        name: 'Matheus S.',\n        id: 3\n      },\n      messages: [\n        {\n          content: 'testing style for received messages', \n          myself: false,\n          participantId: 1,\n          timestamp: { year: 2012, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123 }\n        },\n        {\n          content: 'testing style for sent messages', \n          myself: true,\n          participantId: 3,\n          timestamp: { year: 2011, month: 0, day: 5, hour: 19, minute: 10, second: 3, millisecond:123 }\n        },\n        {\n          content: 'testing style for received messages', \n          myself: false,\n          participantId: 2,\n          timestamp: { year: 2010, month: 3, day: 5, hour: 10, minute: 10, second: 3, millisecond: 123 }\n        }\n      ],\n      chatTitle: 'My chat title',\n      placeholder: 'send your message',\n      colors:{\n        header:{\n          bg: '#d30303',\n          text: '#fff'\n        },\n        message:{\n          myself: {\n            bg: '#fff',\n            text: '#bdb8b8'\n          },\n          others: {\n            bg: '#fb4141',\n            text: '#fff'\n          }\n        },\n        submitIcon: '#b91010'\n      }\n    }\n  },\n  methods: {\n    onType: function (){\n      console.log('typing');\n    },\n    onMessageSubmit: function(){\n      console.log('message submit')\n    }\n  }\n}\n",{"version":3,"sources":["App.vue"],"names":[],"mappings":";;;;;;;;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"App.vue","sourceRoot":".","sourcesContent":["<template>\n  <div id=\"app\">\n    <div class=\"chat-container\">\n      <Chat :participants=\"participants\" :myself=\"myself\" :messages=\"messages\" :onType=\"onType\" :onMessageSubmit=\"onMessageSubmit\" :chatTitle=\"chatTitle\" :placeholder=\"placeholder\" :colors=\"colors\"/>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Chat from './components/Chat.vue'\nimport moment from 'moment'\nexport default {\n  name: 'app',\n  components: {\n    Chat\n  },\n  created(){\n    moment.locale('pt-br')\n  },\n  data(){\n    return {\n      participants: [\n        {\n          name: 'Arnaldo',\n          id: 1\n        },\n        {\n          name: 'José',\n          id: 2\n        }\n      ],\n      myself: {\n        name: 'Matheus S.',\n        id: 3\n      },\n      messages: [\n        {\n          content: 'testing style for received messages', \n          myself: false,\n          participantId: 1,\n          timestamp: { year: 2012, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123 }\n        },\n        {\n          content: 'testing style for sent messages', \n          myself: true,\n          participantId: 3,\n          timestamp: { year: 2011, month: 0, day: 5, hour: 19, minute: 10, second: 3, millisecond:123 }\n        },\n        {\n          content: 'testing style for received messages', \n          myself: false,\n          participantId: 2,\n          timestamp: { year: 2010, month: 3, day: 5, hour: 10, minute: 10, second: 3, millisecond: 123 }\n        }\n      ],\n      chatTitle: 'My chat title',\n      placeholder: 'send your message',\n      colors:{\n        header:{\n          bg: '#d30303',\n          text: '#fff'\n        },\n        message:{\n          myself: {\n            bg: '#fff',\n            text: '#bdb8b8'\n          },\n          others: {\n            bg: '#fb4141',\n            text: '#fff'\n          }\n        },\n        submitIcon: '#b91010'\n      }\n    }\n  },\n  methods: {\n    onType: function (){\n      console.log('typing');\n    },\n    onMessageSubmit: function(){\n      console.log('message submit')\n    }\n  }\n}\n</script>\n\n<style>\n#app {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n.chat-container{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgb(247, 243, 243);\n  padding: 10px 0 10px 0;\n  height: 500px;\n  width: 100%;\n}\n</style>\n"]}]}