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