{"id":27001509,"url":"https://github.com/tugayyaldiz/vue-comment-grid","last_synced_at":"2025-08-18T09:39:31.853Z","repository":{"id":45753106,"uuid":"124293259","full_name":"TugayYaldiz/vue-comment-grid","owner":"TugayYaldiz","description":"💬 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid","archived":false,"fork":false,"pushed_at":"2020-12-16T10:53:55.000Z","size":27798,"stargazers_count":157,"open_issues_count":0,"forks_count":22,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-30T15:40:47.159Z","etag":null,"topics":["comment-grid","css-grid","firebase","firebase-authentication","firebase-rest-api","grid-system","plugin","vue","vue-comment","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TugayYaldiz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-07T20:54:06.000Z","updated_at":"2025-03-28T10:27:59.000Z","dependencies_parsed_at":"2022-08-31T04:42:16.194Z","dependency_job_id":null,"html_url":"https://github.com/TugayYaldiz/vue-comment-grid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TugayYaldiz%2Fvue-comment-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TugayYaldiz%2Fvue-comment-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TugayYaldiz%2Fvue-comment-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TugayYaldiz%2Fvue-comment-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TugayYaldiz","download_url":"https://codeload.github.com/TugayYaldiz/vue-comment-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247117797,"owners_count":20886445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["comment-grid","css-grid","firebase","firebase-authentication","firebase-rest-api","grid-system","plugin","vue","vue-comment","vuejs"],"created_at":"2025-04-04T04:18:28.288Z","updated_at":"2025-04-04T04:18:29.095Z","avatar_url":"https://github.com/TugayYaldiz.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue.js Comment Grid\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Installation](#installation)\n  - [Downloading Plugin](#downloading-plugin)\n    - [Dependencies](#dependencies)\n    - [Include Plugin](#include-plugin)\n  - [Creating Firebase Project](#creating-firebase-project)\n  - [Setting Up Sign-In Method](#setting-up-sign-in-method)\n  - [Getting Base URL and API Key](#getting-base-url-and-api-key)\n  - [Creating Database Node Name](#creating-database-node-name)\n  - [Setting Up Database Rules](#setting-up-database-rules)\n  - [Giving Yourself Admin Permission](#giving-yourself-admin-permission)\n  - [Changing Name or Comment Length Props](#changing-name-or-comment-length-props)\n- [Usage](#usage)\n  - [Default settings with Dark Backgrounds](#default-settings-with-dark-backgrounds)\n  - [Default settings with Light Backgrounds](#default-settings-with-light-backgrounds)\n- [Props](#props)\n- [Customizing](#customizing)\n- [TODO](#todo)\n- [Why i did this plugin?](#why-i-did-this-plugin)\n- [License](#license)\n\n## Introduction\n\n💬 Vue.js Comment Grid and [Demo](https://tugayyaldiz.github.io/vue-comment-grid) built with full CSS Grid and Firebase REST API + Authentication.\n\nBasically you can just create [Firebase Project](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/creating-database.md), [enable Email/Password sign-in method](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/set-sign-methods.md) and pass [database URL](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/get-base-url-api-key.md), [API Key](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/get-base-url-api-key.md) and [node name](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/creating-database-node-name.md) you created in database as component props and set database rules to [this.](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/database-rules.md) Thats all.\n\n## Installation\n\n### Downloading Plugin\n\n```bash\nnpm install --save vue-comment-grid\n```\n#### Dependencies\n\n- Axios - For HTTP requests.\n\n\u003e If you already use Axios in your project then no dependencies at all. 🤗\n#### Include Plugin\n\nInclude plugin in your `main.js` file.\n\n```js\nimport Vue from 'vue'\nimport CommentGrid from 'vue-comment-grid'\n\nVue.use(CommentGrid)\n```\n️️⚠️ **The following steps are important please read all.**\n\nMost steps will only performing once.\n\nBelieve me, i wanted zero config usage for you but for **security reasons** some steps need to be setting up manually by you.\n\n### Creating Firebase Project\n\nCreate new project in firebase console.\n\nIf you don't know how to create new project see detailed [here.](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/creating-database.md)\n\n### Setting Up Sign-In Method\n\nEnable Email/Password method under Firebase Authentication menu.\n\nIf you don't know how to enable Email/Password sign-in method see detailed [here.](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/set-sign-methods.md)\n\n### Getting Base URL and API Key\n\nGet databaseURL and apiKey from Firebase.\n\nYou can find Firebase databaseURL and apiKey in web setup under authentication menu from Firebase console.\n\nIf you don't know how to get there see detailed [here.](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/get-base-url-api-key.md)\n\n### Creating Database Node Name\n\nFor **security reasons** you need to create node names manually by yourself. Before passing new nodeName for different pages be sure you created that node name in database.\n\nIf you adding your first node name add `Name: commentsGrid/nodeNameYouWant/active Value: true ` under Realtime Database Root.\n\nFor other node names that you will create add `Name: nodeNameYouWant/active Value: true` under `commentsGrid` .\n\nIf you don't know how to do this see detailed [here.](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/creating-database-node-name.md)\n\n### Setting Up Database Rules\n\nSet Realtime Database Rules to [this.](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/database-rules.md)\n\nIf you don't know how to change database rules see detailed  [here.](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/database-rules-tutorial.md)\n\n### Giving Yourself Admin Permission\n\nAfter setting up database rules, you have everything that you need. Pass required values as props to component and run system.\n\nFirst sign up as a normal user in the comment system then find yourself under `commentUsers` node in Firebase Database and add new child `Name: admin Value: true` there.\n\nIf you want to give more people admin permission just add them  `admin: true` child too.\n\nIf you don't know how to do this see detailed [here.](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/giving-yourself-admin.md)\n\n### Changing Name or Comment Length Props\n\nThe default max user name length is \"30\" and default max comment length is \"1000\" character long. If you want change this values then you need to change values from Firebase Rules too. See detailed [here.](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/updating-name-or-comment-length.md)\n\n## Usage\n\n```vue\n\u003ccomment-grid\n  baseURL=\"https://your-app.firebaseio.com\"\n  apiKey=\"your-api-key\"\n  nodeName=\"nodeNameThatYouCreated\"\u003e\n\u003c/comment-grid\u003e\n```\nThe above code is default required settings.\n\n### Default settings with Dark Backgrounds\n\n![Default Dark Background](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/img/default_black.png?raw=true)\n\n### Default settings with Light Backgrounds\n\n![Default White Background](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/img/default_white.png?raw=true)\n\n\n## Props\n\n| Name       | Type     | Default   | Description       | Required |\n| ---        | ---      | ---       | ---               | --- |\n| baseURL    | String   | null      | databaseURL of your Firebase Project | True |\n| apiKey     | String   | null      | apiKey of your Firebase Project | True |\n| nodeName   | String   | null      | node name that you created in Firebase Realtime Database | True |\n| maxUserNameLength   | String   | \"30\"      | The name of the user must be below this value when sign-up. If you change this value then you need to change values from Firebase Rules too. See [docs.](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/updating-name-or-comment-length.md#changing-name-length) | Optional |\n| maxCommentLength   | String   | \"1000\"      | The character limit of comments. If you change this value then you need to change values from Firebase Rules too. See [docs.](https://github.com/TugayYaldiz/vue-comment-grid/blob/master/docs/updating-name-or-comment-length.md#changing-comment-length)| Optional |\n| initialMessageLimit   | String   | \"10\"      | Sets maximum message limit to shown at first load. When 'Show more comment' is clicked, the number of comment impressions will increase by this number.| Optional |\n| maxLineLimit   | String   | \"40\"      | Sets line break limit. This is for prevent users from creating too many lines. Exceeded line breaks will be converted to spaces. Lines number are stored in database, so under this limit comments show directly without any operation.| Optional |\n| maxShowingDepth   | String   | \"5\"      | Sets maximum reply depth to shown. This is not a maximum reply depth limit. Just for showing and hiding. There is no limit for depth. | Optional |\n| background   | String   | \"transparent\"      | This is for customizing the background color of component. You can pass HEX, RGB, RGBA, HSL, HSV and even Gradient values. | Optional |\n| commentBackgroundColor   | String   | \"white\"      | This is for customizing the  color of comment box. You can pass HEX, RGB, etc. like the ones above. | Optional |\n| commentTextColor   | String   | \"#1d2129\"      | This is for customizing the color of comments. You can pass HEX, RGB, etc. like the ones above. | Optional |\n| userNameColor   | String   | \"rgb(6, 177, 183)\"      | This is for customizing the color of user names. You can pass HEX, RGB, etc. like the ones above. | Optional |\n\n## Customizing\n\nIf you want to customizing component props take a look at [here.](https://tugayyaldiz.github.io/vue-comment-grid/#/customize)\n\n## TODO\n\n- [ ] Add different languages support.\n- [ ] Add ranking and sorting system for comments.\n\n\n## Why i did this plugin?\n\nI wanted to learn the CSS Grid and combine it with the technologies i already know. So i came up with this idea. I loved CSS Grid so much and definitely recommend you to use it.\n\nDemo: https://tugayyaldiz.github.io/vue-comment-grid\n\nDemo Video: https://www.youtube.com/watch?v=hp8AMCitHT0\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftugayyaldiz%2Fvue-comment-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftugayyaldiz%2Fvue-comment-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftugayyaldiz%2Fvue-comment-grid/lists"}