vue-commentbox

An elegant and stylable comment box for VueJS web applications

Getting Started

Download from NPM or Yarn

npm i vue-commentbox --save

yarn add vue-commentbox

Browser Support

• IE9+
• Opera 10.5+
• Firefox 3.5+
• Chrome 4.0+
• Edge 13+

Caveats

• 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

Importing

import Vue from 'vue';
import { CommentBox, CommentBoxPlugin } from "vue-commentbox";

Vue.use(CommentBoxPlugin);

How to Use

	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;
			}
		}
	});

Modify CSS

	.comment-body-wrapper {
		padding:20px; /* make the comment box smaller in size - customization */
	}

License

MIT

Contributing

We are pleased to have you collaborate and contribute to vue-commentbox vue package. Also, report issues with the package to [email protected] Please see our CONTRIBUTION GUIDELINES here for more information

Building And Testing

	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