Change to component import instead of plugin use

juzser · Jan 3, 2020 · d7615c6 · d7615c6
1 parent 360350c
commit d7615c6
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -23,15 +23,20 @@ yarn add vue-bot-ui
 
 ## Usage
 
-Include plugin in your `main.js` file.
+Import & register the component
 
 ```javascript
-import VueBotUI from 'vue-bot-ui'
+import { VueBotUI } from 'vue-bot-ui'
 
-Vue.use(VueBotUI)
+export default {
+  components: {
+    VueBotUI,
+  },
+  ...
+}
 ```
 
-Use it:
+And use it:
 
 ```vue
 <VueBotUI

diff --git a/dist/vue-bot-ui.common.js b/dist/vue-bot-ui.common.js
@@ -546,12 +546,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"721d366b-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/pug-plain-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/BotUI.vue?vue&type=template&id=530ce492&lang=pug&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"721d366b-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/pug-plain-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/BotUI.vue?vue&type=template&id=20c1632b&lang=pug&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"qkb-bot-ui",class:_vm.uiClasses},[_c('transition',{attrs:{"name":"qkb-fadeUp"}},[(_vm.botActive)?_c('div',{staticClass:"qkb-board"},[_c('BoardHeader',{attrs:{"bot-title":_vm.optionsMain.botTitle},on:{"close-bot":_vm.botToggle}}),_c('BoardContent',{attrs:{"bot-typing":_vm.botTyping,"main-data":_vm.messages}}),_c('BoardAction',{attrs:{"input-disable":_vm.inputDisable,"input-placeholder":_vm.optionsMain.inputPlaceholder,"input-disable-placeholder":_vm.optionsMain.inputDisablePlaceholder},on:{"msg-send":_vm.sendMessage}})],1):_vm._e()]),_c('div',{staticClass:"qkb-bot-bubble"},[_c('button',{staticClass:"qkb-bubble-btn",on:{"click":_vm.botToggle}},[_vm._t("bubbleButton",[_c('transition',{attrs:{"name":"qkb-scaleUp"}},[(!_vm.botActive)?_c('BubbleIcon',{key:"1",staticClass:"qkb-bubble-btn-icon"}):_c('CloseIcon',{key:"2",staticClass:"qkb-bubble-btn-icon qkb-bubble-btn-icon--close"})],1)])],2)]),_c('AppStyle',{attrs:{"options":_vm.optionsMain}}),_c('div',{staticClass:"qkb-preload-image"},[(_vm.optionsMain.botAvatarImg)?_c('div',{staticClass:"qkb-msg-avatar__img"}):_vm._e()])],1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/BotUI.vue?vue&type=template&id=530ce492&lang=pug&
+// CONCATENATED MODULE: ./src/components/BotUI.vue?vue&type=template&id=20c1632b&lang=pug&
 
 // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
@@ -1338,7 +1338,7 @@ function BotUIvue_type_script_lang_js_defineProperty(obj, key, value) { if (key
 
 
 /* harmony default export */ var BotUIvue_type_script_lang_js_ = ({
-  name: 'VBotUI',
+  name: 'VueBotUi',
   components: {
     BoardHeader: Header,
     BoardContent: Content,
@@ -1368,7 +1368,7 @@ function BotUIvue_type_script_lang_js_defineProperty(obj, key, value) { if (key
   },
   data: function data() {
     return {
-      botActive: true,
+      botActive: false,
       defaultOptions: {
         botTitle: 'Chatbot',
         colorScheme: '#1b53d0',
@@ -1465,7 +1465,9 @@ var Plugin = {
   }
 };
 /* harmony default export */ var vue_bot_ui = (Plugin);
+
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
+/* concated harmony reexport VueBotUI */__webpack_require__.d(__webpack_exports__, "VueBotUI", function() { return BotUI; });
 
 
 /* harmony default export */ var entry_lib = __webpack_exports__["default"] = (vue_bot_ui);

diff --git a/dist/vue-bot-ui.umd.js b/dist/vue-bot-ui.umd.js
@@ -555,12 +555,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"721d366b-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/pug-plain-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/BotUI.vue?vue&type=template&id=530ce492&lang=pug&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"721d366b-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/pug-plain-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/BotUI.vue?vue&type=template&id=20c1632b&lang=pug&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"qkb-bot-ui",class:_vm.uiClasses},[_c('transition',{attrs:{"name":"qkb-fadeUp"}},[(_vm.botActive)?_c('div',{staticClass:"qkb-board"},[_c('BoardHeader',{attrs:{"bot-title":_vm.optionsMain.botTitle},on:{"close-bot":_vm.botToggle}}),_c('BoardContent',{attrs:{"bot-typing":_vm.botTyping,"main-data":_vm.messages}}),_c('BoardAction',{attrs:{"input-disable":_vm.inputDisable,"input-placeholder":_vm.optionsMain.inputPlaceholder,"input-disable-placeholder":_vm.optionsMain.inputDisablePlaceholder},on:{"msg-send":_vm.sendMessage}})],1):_vm._e()]),_c('div',{staticClass:"qkb-bot-bubble"},[_c('button',{staticClass:"qkb-bubble-btn",on:{"click":_vm.botToggle}},[_vm._t("bubbleButton",[_c('transition',{attrs:{"name":"qkb-scaleUp"}},[(!_vm.botActive)?_c('BubbleIcon',{key:"1",staticClass:"qkb-bubble-btn-icon"}):_c('CloseIcon',{key:"2",staticClass:"qkb-bubble-btn-icon qkb-bubble-btn-icon--close"})],1)])],2)]),_c('AppStyle',{attrs:{"options":_vm.optionsMain}}),_c('div',{staticClass:"qkb-preload-image"},[(_vm.optionsMain.botAvatarImg)?_c('div',{staticClass:"qkb-msg-avatar__img"}):_vm._e()])],1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/BotUI.vue?vue&type=template&id=530ce492&lang=pug&
+// CONCATENATED MODULE: ./src/components/BotUI.vue?vue&type=template&id=20c1632b&lang=pug&
 
 // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
@@ -1347,7 +1347,7 @@ function BotUIvue_type_script_lang_js_defineProperty(obj, key, value) { if (key
 
 
 /* harmony default export */ var BotUIvue_type_script_lang_js_ = ({
-  name: 'VBotUI',
+  name: 'VueBotUi',
   components: {
     BoardHeader: Header,
     BoardContent: Content,
@@ -1377,7 +1377,7 @@ function BotUIvue_type_script_lang_js_defineProperty(obj, key, value) { if (key
   },
   data: function data() {
     return {
-      botActive: true,
+      botActive: false,
       defaultOptions: {
         botTitle: 'Chatbot',
         colorScheme: '#1b53d0',
@@ -1474,7 +1474,9 @@ var Plugin = {
   }
 };
 /* harmony default export */ var vue_bot_ui = (Plugin);
+
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
+/* concated harmony reexport VueBotUI */__webpack_require__.d(__webpack_exports__, "VueBotUI", function() { return BotUI; });
 
 
 /* harmony default export */ var entry_lib = __webpack_exports__["default"] = (vue_bot_ui);

diff --git a/dist/vue-bot-ui.umd.min.js b/dist/vue-bot-ui.umd.min.js
diff --git a/src/App.vue b/src/App.vue
@@ -15,11 +15,13 @@
 </template>
 <script>
 import BotIcon from '@/assets/icons/bot.png'
+import { VueBotUI } from './vue-bot-ui'
 import { messageService } from '@/helpers/message'
 
 export default {
   components: {
-    BotIcon
+    BotIcon,
+    VueBotUI
   },
 
   data () {

diff --git a/src/components/BotUI.vue b/src/components/BotUI.vue
@@ -46,7 +46,8 @@ import BubbleIcon from '@/assets/icons/bubble.svg'
 import CloseIcon from '@/assets/icons/close.svg'
 
 export default {
-  name: 'VBotUI',
+  name: 'VueBotUI',
+
   components: {
     BoardHeader,
     BoardContent,
@@ -79,7 +80,7 @@ export default {
 
   data () {
     return {
-      botActive: true,
+      botActive: false,
       defaultOptions: {
         botTitle: 'Chatbot',
         colorScheme: '#1b53d0',

diff --git a/src/main.js b/src/main.js
@@ -1,11 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
-import VueBotUI from './vue-bot-ui'
 
 Vue.config.productionTip = false
 
-Vue.use(VueBotUI)
-
 new Vue({
   render: (h) => h(App)
 }).$mount('#app')
diff --git a/src/vue-bot-ui.js b/src/vue-bot-ui.js
@@ -1,8 +1,8 @@
-import BotUI from '@/components/BotUI.vue'
+import VueBotUI from '@/components/BotUI.vue'
 
 const Plugin = {
   install (Vue, options) {
-    Vue.component('VueBotUI', BotUI)
+    Vue.component('VueBotUI', VueBotUI)
 
     if (options) {
       // console.log('options', options)
@@ -11,3 +11,4 @@ const Plugin = {
 }
 
 export default Plugin
+export { VueBotUI }