{"id":16998285,"url":"https://github.com/jungwoo-an/slackpanda","last_synced_at":"2025-04-12T06:06:47.715Z","repository":{"id":57160823,"uuid":"299642694","full_name":"Jungwoo-An/slackpanda","owner":"Jungwoo-An","description":"🤖  A Vue renderer for Slack 🐼","archived":false,"fork":false,"pushed_at":"2021-02-20T05:30:34.000Z","size":44018,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T06:06:36.694Z","etag":null,"topics":["bot","custom-renderer","renderer","slack","vue","vue3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Jungwoo-An.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-29T14:27:40.000Z","updated_at":"2023-03-04T05:00:23.000Z","dependencies_parsed_at":"2022-08-24T08:11:13.191Z","dependency_job_id":null,"html_url":"https://github.com/Jungwoo-An/slackpanda","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/Jungwoo-An%2Fslackpanda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jungwoo-An%2Fslackpanda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jungwoo-An%2Fslackpanda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jungwoo-An%2Fslackpanda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jungwoo-An","download_url":"https://codeload.github.com/Jungwoo-An/slackpanda/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248525145,"owners_count":21118618,"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":["bot","custom-renderer","renderer","slack","vue","vue3"],"created_at":"2024-10-14T04:04:46.650Z","updated_at":"2025-04-12T06:06:47.685Z","avatar_url":"https://github.com/Jungwoo-An.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"docs/assets/slackpanda.png\" width=\"250\"\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cp\u003e🤖 Vue3 for Slack Application 🐼\u003c/p\u003e\n\n\u003cp\u003eSlackpanda provides UI building experience same as web in the slack. If you know Vue3, You can use awesome reactivity system of vue 3.\u003c/p\u003e\n\n[![npm version](https://badge.fury.io/js/%40slackpanda%2Fcore.svg)](https://badge.fury.io/js/%40slackpanda%2Fcore)\n![LICENSE](https://img.shields.io/npm/l/%40slackpanda%2Fcore?color=blue)\n\n## Setup\n\n```bash\n# via npm\n$ npm install @slackpanda/vue @slackpanda/slack\n\n# via yarn\n$ yarn add @slackpanda/vue @slackpanda/slack\n```\n\nIf you not have build command for .vue file, Recommend [vue3-node](https://github.com/Jungwoo-An/vue3-node) library.\n\n```bash\n# via npm\n$ npm install vue3-node\n\n# via yarn\n$ yarn add vue3-node\n```\n\n## Getting Started\n\n### Create New Slack App\n\n1. Go to https://api.slack.com/apps and click `Create New App` button\n\n2. Fill `App Name` and click `Create App`\n\n3. Save `Client Secret` and `Signing Secret`\n\n4. Go to `OAuth \u0026 Permissions` menu in side-bar. Then add `chat:write` scope\n\n5. If you need interaction handler (button, modal, ...), Go to `Interactivity \u0026 Shortcuts` menu in side-bar. Then set `Request URL` to `https?://{ip}:{port (default 8080)}`\n\n### Sending messages\n\n1. Create vue component file\n\n   ```vue\n   // VueIssues.vue\n   \u003ctemplate\u003e\n     \u003cpb-section text=\"Vue.js Issues\" /\u003e\n     \u003cpb-section v-if=\"issues.length \u003e 0\"\u003e\n       \u003cpb-section-fields\u003e\n         \u003cpb-text v-for=\"issue in issues\" :key=\"issue.id\"\u003e\n           {{ issue.title }}\n         \u003c/pb-text\u003e\n       \u003c/pb-section-fields\u003e\n     \u003c/pb-section\u003e\n     \u003cpb-actions\u003e\n       \u003cpb-button v-if=\"showsPrevButton\" @click=\"onPrevButtonClicked\"\u003e\n         Prev Page\n       \u003c/pb-button\u003e\n       \u003cpb-button @click=\"onNextButtonClicked\"\u003eNext Page\u003c/pb-button\u003e\n     \u003c/pb-actions\u003e\n   \u003c/template\u003e\n\n   \u003cscript lang=\"ts\"\u003e\n   import { defineComponent, onMounted, ref, computed } from 'vue';\n   import axios from 'axios';\n   import {\n     PbButton,\n     PbSection,\n     PbSectionFields,\n     PbText,\n     PbActions,\n   } from '@slackpanda/vue';\n\n   export default defineComponent({\n     name: 'VueIssues',\n     components: {\n       PbSection,\n       PbSectionFields,\n       PbText,\n       PbButton,\n       PbActions,\n     },\n     setup() {\n       const page = ref(1);\n\n       const issues = ref\u003cany[]\u003e([]);\n\n       const showsPrevButton = computed(() =\u003e page.value \u003e 1);\n\n       async function fetchData() {\n         const response = await axios.get(\n           `https://api.github.com/repos/vuejs/vue/issues?per_page=5\u0026page=${page.value}`\n         );\n\n         issues.value = response.data;\n       }\n\n       function onNextButtonClicked() {\n         page.value += 1;\n\n         fetchData();\n       }\n\n       function onPrevButtonClicked() {\n         page.value -= 1;\n\n         fetchData();\n       }\n\n       onMounted(() =\u003e {\n         fetchData();\n       });\n\n       return {\n         issues,\n\n         showsPrevButton,\n\n         onNextButtonClicked,\n         onPrevButtonClicked,\n       };\n     },\n   });\n   \u003c/script\u003e\n   ```\n\n2. Create new client by calling function\n\n   ```ts\n   const { createClient } = require('@slackpanda/vue');\n   const { SlackAdapter } = require('@slackpanda/slack');\n\n   const adapter = new SlackAdapter({\n     apiToken: process.env.SLACK_API_TOKEN, // Client Secret\n     signingSecret: process.env.SLACK_SIGNING_SECRET, // Signing Secret\n     port: 8080, // Default 8080\n   });\n\n   const client = createClient({\n     adapter,\n   });\n   ```\n\n3. Send your slack app\n\n   ```ts\n   const VueIssues = reuqire('./VueIssues.vue');\n\n   client.sendMessage(VueIssues, '#general');\n   ```\n\n4. Works fine!\n\n   \u003cimg src=\"docs/assets/preview.gif\"\u003e\n\n## Feature Planning\n\n- [ ] Test\n- [ ] Friendly error report\n- [ ] Home tabs\n- [ ] CLI\n\n## Documentation\n\n- [Components](docs/components.md)\n- [API](docs/api.md)\n- [FAQ](docs/faq.md)\n\n## Examples\n\n- [PingPong](examples/PingPong) - Simple express example that sends \"Pong\" when calling /ping command\n- [VueIssues](examples/VueIssues) - Show issues of vue.js repository with pagination\n- [TodoList](examples/TodoList) - ⏰ 🤖\n\n## Supported Platforms and Frameworks\n\n|                                                                                            | [Vue](packages/vue) | React |\n| ------------------------------------------------------------------------------------------ | :-----------------: | :---: |\n| [Slack](https://slack.com)                                                                 |         ✅          |  ❌   |\n| [Discord](https://discord.com)                                                             |         ❌          |  ❌   |\n| [Teams](https://www.microsoft.com/ko-kr/microsoft-365/microsoft-teams/group-chat-software) |         ❌          |  ❌   |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjungwoo-an%2Fslackpanda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjungwoo-an%2Fslackpanda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjungwoo-an%2Fslackpanda/lists"}