An elegant and stylable comment box for VueJS web applications
Download from NPM or Yarn
npm i vue-commentbox --save yarn add vue-commentbox - IE9+
- Opera 10.5+
- Firefox 3.5+
- Chrome 4.0+
- Edge 13+
- This package provides a polyfill for FormData so the comment can be submitted with file attachments, you MUST also include Polyfill library to enable the code work on older browsers like IE 9/Opera 11
- Due to some bugs related to contenteditable which have not yet been fixed, IE 9-11 and Opera 10-14 work partially
import Vue from 'vue'; import { CommentBox, CommentBoxPlugin } from "vue-commentbox"; Vue.use(CommentBoxPlugin);new Vue({ el:"#app", template:` <main class="page"> <comment-box :input-placeholder-text="placeHolderText" :comments="comments" :context-author="'Dauda Adeboye'" :context-avatar-thumb="thumbImage" :box-action="actionHref" :use-xhr="xhr" v-on:beforesend="beforeSend"> /> </main>`, components:{ 'comment-box':CommentBox }, data:function(){ return { comments:[ {text: "This is a comment!"}, {text: "This is another comment"} ], placeHolderText:'Post Something', xhr:true, iconFillColor:'#eeddac' } }, methods:{ beforeSend:function(){ console.log("about to send comment to server...") } }, computed:{ actionHref:function(){ let origin = window.location.origin; return `${origin}/store/comment`; }, thumbImage:function(){ let scheme = window.location.protocol; return `${scheme}//assets-cdn.store.com.ng/images/png/passport.jpg` }, usernamesAvailable:function(){ return true; } } });.comment-body-wrapper { padding:20px; /* make the comment box smaller in size - customization */ }MIT
We are pleased to have you collaborate and contribute to vue-commentbox vue package. Also, report issues with the package to synergixe.org@gmail.com Please see our CONTRIBUTION GUIDELINES here for more information
git clone https://github.com/synergixe/vue-commentbox.git npm install npm run lint:fix:all npm run lint npm run test npm run build 